多次渲染一个组件 React.js答案

【问题标题】：Render a component multiple times React.js多次渲染一个组件 React.js
【发布时间】：2017-08-20 03:08:43
【问题描述】：

这是一个简单计数器的代码。

但是，当我渲染视图时，我没有得到任何输出。请告诉我代码有什么问题。

按下按钮，计数器增加并呈现在屏幕上。

 var Title = React.createClass({

  getInitialState : function(){
    return {count:0};
  },
  increment : function(){

    this.setState({count:this.state.count+this.props.incVal});
  },
  render: function() {
    return (
      <div>
        <h1 >Count : {this.state.count}< /h1>
        <button onClick={this.increment} >Increment</button>
      </div>
    );
  }
});




var MultiButton = React.createClass({
  render : function (){
    return(
      <Title incVal={1}/>
      <Title incVal={5}/>
    );
  }
});

ReactDOM.render( <MultiButton /> ,
  document.getElementById('example')
);

【问题讨论】：

除了下面 Rafael 的正确答案之外，react 确实在浏览器控制台中显示了不错的错误消息（在大多数浏览器中通过按 F12 打开）。当出现问题时，查看浏览器控制台中的错误日志可能是一个好习惯。

标签： reactjs web rendering

【解决方案1】：

来自official documentation。

<div>
  Here is a list:
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

一个 React 组件不能返回多个 React 元素，而是一个 JSX 表达式可以有多个孩子，所以如果你想要一个组件要渲染多个内容，您可以将其包装在这样的 div 中。

改变

var MultiButton = React.createClass(
  {
    render: function () {
      return (
        <Title incVal={1}/>
        <Title incVal={5}/>
      );
    }
  }  
);

到

var MultiButton = React.createClass(
  {
    render: function () {
      return (
        <div>
          <Title incVal={1}/>
          <Title incVal={5}/>
        </div>
      );
    }
  }  
);

【讨论】：

【解决方案2】：

你不能从 React 类返回多个元素。如果您有多个元素，请将它们包装在一个 div 中，例如

var MultiButton = React.createClass({
  render : function (){
    return(
      <div>
          <Title incVal={1}/>
          <Title incVal={5}/>
      </div>
    );
  }
});

【讨论】：

【解决方案3】：

 var Title = React.createClass({

  getInitialState : function(){
    return {count:0};
  },
  increment : function(){

    this.setState({count:this.state.count+this.props.incVal});
  },
  render: function() {
    return (
      <div>
        <h1 >Count : {this.state.count}< /h1>
        <button onClick={this.increment.bind(this)} >Increment</button>
      </div>
    );
  }
});




var MultiButton = React.createClass({
  render : function (){
    return(
      <Title incVal={1}/>
    );
  }
});

ReactDOM.render( <MultiButton /> ,
  document.getElementById('example')
);

【讨论】：