Question

我需要根据状态显示特定的组件。为此，我创建了一个对象，该对象根据活动的选项卡索引定义要显示的组件。但是，该对象将非常庞大，并且我不希望它占用App.js中的数千行。但是，这些动态组件所需的许多道具都来自App的状态。有什么办法可以将components提取到自己的js文件中，并且仍然可以访问App的状态和功能来设置道具？

在App.js中：

components = () => {
        return {
            Standard: {
                0: {
                    comp: StandardOverview,
                    props: {
                        overview: this.state.overview,
                        enroll: this.doEnroll
                    }
                },
                1: {
                    comp: AccountActivity,
                    props: {
                        account: this.props.account,
                        accountData: this.state.accountData
                    }
                }
            },
            Special: {
                0: {
                    comp: SpecialOverview,
                    props: {
                        overview: this.state.overview,
                        enroll: this.doEnrollSpecial
                    }
                },
                1: {
                    comp: Communications,
                    props: {
                        subscriptions: this.state.subscriptions,
                        mobilePhone: this.state.mobilePhone,
                        onSubscribeClick: this.onSubscribeClick
                    }
                }
          }
       }
};

render() {
    const contentForIndex = this.components()[this.state.profileType || "Standard"][this.state.activeIndex];
        const ContentComponent = contentForIndex.comp;
        const props = contentForIndex.props;
        return (
            <ErrorHandler>
                <ContentComponent {...props} />
            </ErrorHandler>
        )
}

Answer 1

我会略有不同。

而不是让components返回一个对象，为什么不将其转换为一个反应组件，该组件使用一个开关根据对component的支持返回正确的子组件？

赞：

components = props => {
        switch(props.yourMainKey){
             case 'standard':
                 return (
                     <StandardOverview 
                         overview={props.overview} 
                         {...anyOtherProps} 
                     />
                 )
             case 'Special':
                 return (
                     <SpecialOverview overview={props.overview} />
                 )
             default:
                 return (
                     <DefaultView overview={props.defaultProps} />
                 )
        }
}

如何使用基于状态的道具来组织React Dynamic Components

1 个答案: