通过 props 动态传递 React 组件？

Posted 2023-02-23

【中文标题】通过 props 动态传递 React 组件？

【英文标题】：Passing down React Components dynamically through props?

【发布时间】：2019-06-08 00:36:55

【问题描述】：

我正在寻找解决方案。我有一个侧边栏组件，它需要根据按下父组件中的哪个按钮来呈现不同的组件。我不确定解决此问题的最佳方法，或者是否可能。这是我的 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>
        )
    

谢谢

【参考方案1】：

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

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

【讨论】：

如果对您有用，请将其标记为已解决