Question

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

父组件

Sidebar组件上的内容道具需要根据单击的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>
        )
    }
}

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

1 个答案: