我对 ReactJS 比较陌生，我正在努力使自己符合它的编程风格！这是一个挑战，但绝对有趣！
我正在制作各种管理控制台。在侧边菜单上有两个页面可以浏览，我想知道我是否以“React”方式处理这个问题。
为简单起见，这里是显示正确内容页面的相关伪代码。
export class Console extends React.Component {
render() {
return (
< ... Sidemenu Content ... />
<ContentWrapper >
{this.getContent()}
</ContentWrapper
);
}
我正在调用一个函数this.getContent()，该函数根据控制台的状态返回一个放置在“ContentWrapper”中的组件。
这是处理组件的“正确”或至少是“好”的方式吗？
孩子的大小取决于控制台中的状态。每次调整窗口大小时，此状态都会更改，并且大小作为 prop 传入this.getContent(). 调用this.getContent()效率低吗？是否每次都重新渲染一个新的子组件，而不是更新已经存在的子组件？
编辑
// Based on the key, returns the content to display to the user.
getContent(key) {
var newContent = null;
switch (key) {
case Sidemenu.map:
newContent = <p>"Map"</p>
break;
case Sidemenu.team:
newContent = <TeamManager size={this.state.contentHeight - 48}/>
break;
default:
break;
}
return newContent;
}
对不起，如果我的问题令人费解，我正在尽力使用 ReactJS 行话！
谢谢！
康纳
我建议做一个条件渲染，它更干净，它可能是这样的：
<ContentWrapper>
{
this.state.Sidemenu.map? <p>Map</p>:
<TeamManager size={this.state.contentHeight - 48}/>
}
</ContentWrapper
** 我假设 Sidemenu 是您所在州的一部分，并且不为 null 或未定义
对于这种情况，您可以在这种情况下使用内联“if”渲染您想要的任何内容
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句