通过 props 动态传递 React 组件？

Question

我正在寻找解决方案。我有一个 Sidebar 组件，它需要根据按下父组件中的哪个按钮来呈现不同的组件。我不确定解决此问题的最佳方法，或者是否可能。这是我的 React 代码：

父组件

Sidebar 组件上的 content prop 需要根据单击的 Button 组件向下传递不同的组件（因此第一个 Button 将在 content prop 中传递一个组件，第二个将向下传递一个组件等）。

 return (
            <Fragment>
                <Sidebar
                    isOpen={this.state.menuOpen}
                    content={<Filters />}
                    />
                <PanelWrapper>
                    <IconContainer>
                       <Button />
                       <Button />
                    </IconContainer>
                </PanelWrapper>
              </Fragment>

)

子组件

这里将呈现内容道具：

class Sidebar extends Component {
    render() {
        return (
            <Menu
                customBurgerIcon={ false }
                noOverlay
                isOpen={this.props.isOpen}
            >
            {this.props.content}
            </Menu>
        )
    }
}

谢谢

Answer 1

与其将组件作为 props 传递，我可能会这样做

class Sidebar extends Component {
    render() {
        return (
            <Menu
                customBurgerIcon={ false }
                noOverlay
                isOpen={this.props.isOpen}
            >
            {switch(this.props.content) {
                case("type1"): <mycomponent1 />
                ...
            }}
            </Menu>
        )
    }
}

通过 props 动态传递 React 组件？

Passing down React Components dynamically through props?

components

reactjs

react-props