多次渲染一个组件 React.js [英] Render a component multiple times React.js

问题描述

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

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

按下按钮，计数器递增并呈现在屏幕上.

 var Title = React.createClass({获取初始状态:函数(){返回{计数:0}；},增量:函数(){this.setState({count:this.state.count+this.props.incVal});},渲染:函数(){返回 (<div><h1>计数:{this.state.count}</h1><button onClick={this.increment} >Increment</button>

);}});var MultiButton = React.createClass({渲染:函数(){返回(<Title incVal={1}/><Title incVal={5}/>);}});ReactDOM.render( <MultiButton/> ,document.getElementById('example'));

解决方案

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

var MultiButton = React.createClass({渲染:函数(){返回(<div><Title incVal={1}/><Title incVal={5}/>

);}});

This is a code for a simple counter.

However, when i Render the view i don't get any output. Please tell me what is wrong with the code.

The button is pressed and a counter is incremented and is rendered onto the screen.

 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')
);

解决方案

You cannot return more than one elements from the React class. If you have more than one elements wrap them in a single div like

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

这篇关于多次渲染一个组件 React.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！