如何在react-redux中从子类到父类的回调? [英] how to get callback from child to parent class in react-redux?
问题描述
我必须渲染几个标签.点击它，它应该被突出显示.我有来自 reducer(硬编码值)的 tabList 对象.单击选项卡时会生成一个操作，该操作使用单击的选项卡对象(我称之为activeTab")设置状态".
在渲染 tabList(所有选项卡)时，我正在检查是否rendered_tabid == active_tabid"然后添加一个类active"(这是有条件的)
active-tab-reducer.js
export const tabReducer = () =>{返回 [{编号:1，name:"牙科专页",网址:'#dentalPage'},{编号:2，name:"视觉页面",网址:'#visionPage'},{编号:3，name:"其他页面标签",网址:'#OtherPage'}]}const activeTabReducer = (state = {}, action) =>{开关(动作.类型){case "TAB_SELECTED": 返回 action.payload;休息;}返回状态；}导出默认的 activeTabReducer；(combined-reducer) index.js
从'redux'导入{combineReducers}；导入 activeTabReducer, {tabReducer} from './active-tab-reducer';const allReducers = combineReducers({tabList: tabReducer,activeTab:activeTabReducer});导出默认的 allReducers；(action) index.js
export const selectTab = (tab) =>{console.log('动作被调用', tab);返回 {类型:TAB_SELECTED"，有效载荷:选项卡}}tablist.js
从'react'导入React；从'react-redux'导入{connect}；从redux"导入{bindActionCreators}；从'../actions/index'导入{selectTab}；从'./tabsListItem'导入TabsListItem；类 TabList 扩展了 React.Component {构造函数(道具){超级(道具)；}createTabItems(){返回 this.props.tabList.map((item, i) => {返回 (<TabsListItem key={i} tabList={item}/>)});}使成为() {返回 (<div id="layout-header" className="layout-header"><div id="header" className="header"><ul className="tabs tabs--horizontal">{this.createTabItems()});}};函数 mapStateToProps(state) {返回 {tabList: state.tabList,activeTab: state.activeTab}}函数 matchDispatchToProps(dispatch){return bindActionCreators({selectTab: selectTab}, dispatch);}导出默认连接(mapStateToProps，matchDispatchToProps)(TabList)；
tabListItem.js
从'react'导入React；类 TabListItem 扩展了 React.Component {构造函数(道具){超级(道具)；console.log(this.props.tabList)}使成为() {返回 (<li onClick={() =>this.props.selectTab(this.props.tabList)}className={"tab"+((this.props.activeTab.id==item.id)?'active':'')+""+((this.props.activeTab.id==undefined)&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&#; (item.id == 1)?'active':'' )role="presentation" className={"tab " }><a href="#"><div className="tab__label"><div className="tab__label__value">{this.props.tabList.name}</div></a>);}};导出默认 TabListItem；
当我单击任何选项卡(来自 tabListItem)时，应调度一个操作 TAB_SELECTED 操作，该操作使用activeTab"对象设置状态.
如何让孩子产生动作?
你应该通过 props 向子组件传递一个函数.
因为动作有一个参数来选择正确的选项卡，你可以使用一个返回函数的函数:
createTabItems() {返回 this.props.tabList.map((item, i) => {返回 (<TabsListItem key={i} tabList={item} onSelect={() =>this.onSelect(i).bind(this)}/>);});}
通过这种方式，您的子组件调用您的方法 onSelect 并传递正确的参数.
在父(容器)组件上的 onSelect 方法中，您将分派您的操作:
onSelect(i) {this.props.selectTab(i);}I have to render few tabs. ONclick of it, it should get highlighted. I have tabList object coming from reducer (hard-coded value). onclicking of a tab a action is generated which set the "state" with clicked tab object(I call it "activeTab").
while rendering the tabList (all the tabs) I am checking if "rendered_tabid == active_tabid" then add a class "active" (it is conditional basis)
active-tab-reducer.js
export const tabReducer = () => {
return [
{
id: 1,
name:"Dental Page",
url: '#dentalPage'
},
{
id: 2,
name:"Vision Page",
url: '#visionPage'
},
{
id: 3,
name:"Other page Tab",
url: '#OtherPage'
}
]
}
const activeTabReducer = (state = {}, action) => {
switch(action.type) {
case "TAB_SELECTED": return action.payload;
break;
}
return state;
}
export default activeTabReducer;
(combined-reducer) index.js
import {combineReducers} from 'redux';
import activeTabReducer, {tabReducer} from './active-tab-reducer';
const allReducers = combineReducers({
tabList: tabReducer,
activeTab: activeTabReducer
});
export default allReducers;
(action) index.js
export const selectTab = (tab) => {
console.log('action invoked', tab);
return {
type: "TAB_SELECTED",
payload: tab
}
}
tablist.js
import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {selectTab} from '../actions/index';
import TabsListItem from './tabsListItem';
class TabList extends React.Component {
constructor(props){
super(props);
}
createTabItems(){
return this.props.tabList.map((item, i) => {
return (
<TabsListItem key={i} tabList={item} />
)
});
}
render() {
return (
<div id="layout-header" className="layout-header">
<div id="header" className="header">
<ul className="tabs tabs--horizontal">
{this.createTabItems()}
</ul>
</div>
</div>
);
}
};
function mapStateToProps(state) {
return {
tabList: state.tabList,
activeTab: state.activeTab
}
}
function matchDispatchToProps(dispatch){
return bindActionCreators({selectTab: selectTab}, dispatch);
}
export default connect(mapStateToProps, matchDispatchToProps)(TabList);
tabListItem.js
import React from 'react';
class TabListItem extends React.Component {
constructor(props){
super(props);
console.log(this.props.tabList)
}
render() {
return (
<li onClick={() => this.props.selectTab(this.props.tabList)}
className={"tab "+((this.props.activeTab.id==item.id)?'active':'')+""+( (this.props.activeTab.id==undefined) && (item.id == 1)?'active':'' )
role="presentation" className={"tab " }>
<a href="#">
<div className="tab__label">
<div className="tab__label__value">{this.props.tabList.name}</div>
</div>
</a>
</li>
);
}
};
export default TabListItem;
when I click any tab (from tabListItem), a action TAB_SELECTED action should dispatch, which set the state with "activeTab" object.
How to generate action from child?
You should pass a function to the child component via props.
As the action has a parameter to select the correct tab, you can use a function returning a function:
createTabItems() {
return this.props.tabList.map((item, i) => {
return (
<TabsListItem key={i} tabList={item} onSelect={() => this.onSelect(i).bind(this)} />
);
});
}
In this way your child component calls your method onSelect passing the correct parameter.
In your onSelect method on the parent (container) component you will then dispatch your action:
onSelect(i) {
this.props.selectTab(i);
}
这篇关于如何在react-redux中从子类到父类的回调?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
