创建父项'；工作空间'；ReactJS中的组件

使用ReactJS，我试图创建一个公共工作区组件，该组件将具有工具栏按钮和导航菜单。我的想法是重用这个组件来包装我在应用程序中渲染的所有其他动态组件

目前，我已经创建了一个工具栏和菜单栏组件，然后将其添加到应用程序中的每个组件中，如下所示：

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

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

<Workspace>
<Vendor/>
</Workspace>

---

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

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

//您的工作区包装器组件
类工作区{
render（）{
返回(
工具栏在这里
导航系统在这里
{this.props.children}
)
}
}
//使用组件定义另一个组件
类MyComponent{
render（）{
返回(
这是我的工作区内容。
)
}
}

---

您还可以查看HOC或包装方式。

至于是否正确，这是主观的，但我可以提供一种制作“包装”类型组件的方法：

//您的工作区包装器组件
类工作区{
render（）{
返回(
工具栏在这里
导航系统在这里
{this.props.children}
)
}
}
//使用组件定义另一个组件
类MyComponent{
render（）{
返回(
这是我的工作区内容。
)
}
}

---

您还可以查看HOC或包装东西。

React提供了两种传统方法，使您的组件可重复使用

1-

您可以在

中用workspace

分离逻辑，然后给它一个组件，将该逻辑应用到其中

带工作区的函数（WrappedComponent，selectData）{
//…并返回另一个组件。。。
返回类扩展了React.Component{
render（）{
//…并使用新数据呈现包装的组件！
//请注意，我们通过了任何附加道具
返回；
}
};
}
常量组件=（）=>{
const Content=withWorkSpace（）
返回
}

React提供了两种传统的方法使您的组件可重复使用

1-

您可以在

中用workspace

分离逻辑，然后给它一个组件，将该逻辑应用到其中

带工作区的函数（WrappedComponent，selectData）{
//…并返回另一个组件。。。
返回类扩展了React.Component{
render（）{
//…并使用新数据呈现包装的组件！
//请注意，我们通过了任何附加道具
返回；
}
};
}
常量组件=（）=>{
const Content=withWorkSpace（）
返回
}