Передавать компоненты React динамически через props?

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

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

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

Спасибо


reactjs components react-props
person geeberry    schedule 14.01.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вместо того, чтобы передавать компонент в качестве реквизита, я бы, вероятно, сделал что-то вроде этого

class Sidebar extends Component {
    render() {
        return (
            <Menu
                customBurgerIcon={ false }
                noOverlay
                isOpen={this.props.isOpen}
            >
            {switch(this.props.content) {
                case("type1"): <mycomponent1 />
                ...
            }}
            </Menu>
        )
    }
}
person Niall Moore    schedule 14.01.2019
comment
Пожалуйста, отметьте это как решенное, если это сработало для вас - person Niall Moore; 15.01.2019