Question

我正在使用custom-closable-tabs.js为我的应用程序创建选项卡，该选项卡使用react和react-redux进行状态管理。我有一种情况，我需要在应用程序中打开同一组件的多个选项卡。考虑到我有一个具有3个用户链接的主主页组件，并且这些用户具有相同的组件但具有不同的数据，例如是否单击了user1 {{1} }组件将被加载到一个新的选项卡[Tab1]中，在该选项卡中将进行API调用以从数据库中获取用户“ Jon”的详细信息，并以redux状态存储数据。同样，对于第二个用户[Tab2] <User name="Jon" />，再次进行API调用以检索用户“ Eve”的详细信息并将其存储在同一reducer中。

当我为两个用户使用相同的reducer时，“ Eve”的数据反映在Tab1中，Jon的数据较早显示在Tab1中。如何为每个组件分别创建reducers状态实例，该实例可以检索单个用户的数据并显示在相应的选项卡中，在这里用户是动态填充的。

应用组件

<User name="Eve">

主要组件

class App extends Component{
constructor(props){
    super(props);
    this.state = {
        data: '',
        activeIndex: 0
    }
}

componentWillMount(){
    this.state.data.push({
        tab: Maintab,
        component: <Main/>,
        id: maintab,
        closeable: false,
        activeIndex: 0
    })
}

openTab(user){
    this.state.data.push({
        tab: user,
        component: <User userName={user}/>,
        id: user,
        closeable: true,
        activeIndex: (this.state.data.length-1)
    })
}


render(){
    return(
        <CloseableTabs 
        data={this.state.data}
        noTabUnmount={true}
        activeIndex={this.state.activeIndex}
        />
    );
}

用户组件

render(){
return(
    <div>
        <div onCLick={()=>{this.props.openTab('Jon')}}>User1: Jon</div>
        <div onCLick={()=>{this.props.openTab('Eve')}}>User2: Eve</div>
        <div onCLick={()=>{this.props.openTab('Seth')}}>User3: Seth</div>
    </div>
);}

减速器

componentDidMount(){
    //Make Api call and store data in reducer with action GET_USER_INFO
}

render(){
    const {father,mother,company} = this.props
    return(
        <div>
            <span>Father:{father}</span>
            <span>Mother:{mother}</span>
            <span>Company:{company}</span>
        </div>
    );
}

为每个被调用的组件多次使用相同的组件以及相同的reducer和state变量实例

0 个答案: