多次渲染组件React.js

问题描述：

这是一个简单计数器的代码。多次渲染组件React.js

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

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

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

除了通过以下拉斐尔正确的答案，反应过来也显示在浏览器控制台不错的错误信息（在按下'F12'打开大多数浏览器）。在出现问题时，查看浏览器控制台中的错误日志可能是一种很好的做法。 – Leone

答

您不能返回从阵营级以上的元素。如果你有一个以上的元素在一个单一的div包裹他们像

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

我完全忘记了这一点，谢谢 –

答

来自official documentation。

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

一个阵营组件不能返回多个反应的元素，但单一的 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> 
    ); 
    } 
    } 
);

答

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

多次渲染组件React.js

相关推荐