Передача React Components динамически через реквизит?

Question

Я ищу решение. У меня есть компонент боковой панели, который должен отображать другой компонент в зависимости от того, какая кнопка в родительском компоненте нажата. Я не уверен в лучшем способе подойти к этой проблеме, или если это возможно. Вот мой код реакции:

Родительский компонент

Для содержимого в компоненте боковой панели необходимо передавать различные компоненты, в зависимости от того, какие компоненты 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>
        )
    }
}