javascript - 按指定顺序渲染 React 组件

Question

很难找到关于这个特定模式的任何信息，我什至不确定如何用搜索词来描述它，所以如果这是一个重复的问题，我深表歉意(虽然我不认为它是) .

我想根据传递给应用程序的顺序输出一个 React 布局，用户可以通过设置面板进行设置。我的想法是在页面上输出几个不同的容器，我希望用户能够重新排列。请务必注意，此顺序在应用呈现后不可更改。 (我希望用户能够说“按顺序显示 PanelA、PanelC 和 PanelB”)

现在，我已经想出了如何使用以下模式完成此操作:

// user-ordered array is passed to the app:
    const settings = {
        layout: [
            "panela",
            "panelb",
            "panelc"
        ]
    }

    class MyComponent extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                // some state
            }
        }
        renderComponentsInOrder() {
            return settings.layout.map(component => {
                switch(component) {
                    case "panela":
                        return 
                            <PanelA {.../* some state */} />
                    case "panelb":
                        return 
                            <PanelB {.../* some state */} />
                    case "panelc":
                        return 
                            <PanelC {.../* some state */} />
                    default: return null
                }
            })
        }

        render() {
            return this.renderComponentsInOrder()
        }
    }

但这让我觉得效率很低。每次渲染运行时不需要重新计算组件的顺序，因为在应用程序运行时顺序不会改变。我试过做一些事情，比如内存 renderComponentsInOrder 方法来缓存计算出的布局，或者重命名 settings.layout 数组中的值并直接调用它们，但是没有任何东西可以工作，因为组件需要根据更新状态。

如有任何帮助或建议，我们将不胜感激。谢谢!

编辑:理想情况下，我正在寻找基于 JS 的解决方案，因为兼容性有点问题，我不想完全依赖浏览器的 CSS 实现。

Answer 1

布兰登给出的答案略有不同。你可以有一个函数来根据状态/ Prop 生成组件:

const settings = {
    layout: [
        "panela",
        "panelb",
        "panelc"
    ]
};

const panels = settings.layout.map(c => {
  switch (c) {
    case "panela": return (props, state) => <PanelA key="a" foo={state.foo} />
    case "panelb": return (props, state) => <PanelB key="b" bar={state.bar} />
  }
});

// Now use panels array to render:

class MyComponent extends React.Component {
  render() {
    const props = this.props;
    const state = this.state;
    const ordered = panels.map(p => p(props, state));

    return <div>{ordered}</div>
  }
}