Question

我对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术语！

谢谢！

康纳

Answer 1

我建议做一个条件渲染，它更干净，它可能是这样的：

 <ContentWrapper>
 { 
  this.state.Sidemenu.map? <p>Map</p>:
  <TeamManager size={this.state.contentHeight - 48}/>
 }
 </ContentWrapper

**我假设Sidemenu是你所在州的一部分而且不是空的或未定义的

对于这种具体情况，您可以使用内联“if”

呈现您想要的任何内容

如何正确更新子组件React.js

1 个答案: