时间戳

首页 > 解决方案 > 在 ReactJS 中创建父“工作区”组件

reactjs - 在 ReactJS 中创建父“工作区”组件

问题描述

使用 ReactJS，我正在尝试创建一个具有工具栏按钮和导航菜单的通用工作区组件。我的想法是重新使用这个组件来包装我在应用程序中呈现的所有其他动态组件。

目前，我已经创建了一个 Toolbar 和 MenuBar 组件，然后我将它们添加到应用程序中的每个组件中，如下所示：

<Toolbar/>
<MenuBar/>
<Vendors/>

这感觉不对，因为我的目标是只有一个组件，类似于：

<Workspace>
<Vendor/>
</Workspace>

但是，我不确定如何实现这一点以及这是否是正确的方法。

标签： reactjs

解决方案

至于它是否是正确的方法是主观的，但我可以深入了解一种制作“包装器”类型组件的方法：

// Your workspace wrapper component
class Workspace {
    render() {
        return (
            <div className="workspace">
                <div className="workspace__toolbar">
                    Toolbar goes here
                </div>
                <div className="workspace__nav">
                    Navgoes here
                </div>
                <div className="workspace__content">
                    {this.props.children}
                </div>
            </div>
        )
    }
}

// Using the component to define another one
class MyComponent {
    render() {
        return (
            <Workspace>
                This is my workspace content.
            </Workspace>
        )
    }
}

您还可以查看 HOC 或更高阶组件来包装东西。

推荐阅读