Question

问题陈述：

我想编写我的react应用程序以基于标志的值使用一组特定的组件。

例如：

我有一个默认情况下由三个组件组成的App组件：

ComponentA，ComponentB和ComponentC。

<App> 
    <ComponentA />
    <ComponentB />
    <ComponentC />
<App/>

现在，如果我的标志等于ShowC，则我希望我的应用呈现ComponentA，ComponentB和ComponentC。

如果该标志等于ShowD，则我要渲染ComponentD而不是ComponentC。

<App> 
    <ComponentA />
    <ComponentB />
    <ComponentD />
<App/>

解决方案：

我使用了一个配置对象，该配置对象具有相应的导入作为键值对：

{
    showC: {
        pos1: ComponentA,
        pos2: ComponentB,
        pos3: ComponentC,
    },
    showD: {
        pos1: ComponentA,
        pos2: ComponentB,
        pos3: ComponentD,
    }
}

现在，在我的主要App.js中：

render() {
    const {
        pos1: FirstComponent,
        pos2: SecondComponent,
        pos3: ThirdComponent
    } = config[<flag>];

    <App>
        <FirstComponent />
        <SecondComponent />
        <ThirdComponent />
    </App>
}

我在stackblitz上创建了一个简单的示例来说明这一点。

https://stackblitz.com/edit/react-app-components-config?file=index.js

我想了解以这种方式组成组件是否被认为是React中的反模式吗？还是有更好的解决方案来解决这个问题？

Answer 1

您可以创建一个HOC，该HOC将根据标志决定要呈现的内容

const DynamicComponent = ({type,children}) => (

  { // you can have any condition here.
    type === 'a'?
    children[0]:
    children[1]
  }

)

//您的主要组件

render() {

    <App>
        <FirstComponent />
        <SecondComponent />
        <DynamicComponent type={config.type}> 
           <ThirdComponent />
           <FourthComponent />
        </DynamicComponent>
    </App>
}

您应该始终尝试为任何此类合成创建新的HOC，它遵循功能性编程合成模式。

根据标志值编写React应用

1 个答案: