通过道具动态传递React组件？

Question

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

父组件

侧边栏组件上的内容道具需要根据单击哪个Button组件传递不同的组件（因此第一个Button将传递内容道具中的组件，第二个Button传递组件等）。

 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

与其将组件作为道具传递，不如做这样的事情

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