Question

我试图通过国家财产＆＃39; val＆＃39;到了＆＃39;柜台＆＃39;组件并获得计数器＆＃39;单击装入按钮时显示其更新值。我的问题是我可以通过＆＃39; counterUpdate＆＃39;功能并从“计数器”调用它，但是我无法获得“支持”功能。即使我正在更新＆＃39; state.val＆＃39;，也要在视图中更新。任何关于为什么会出现此问题的想法和建议都会受到高度赞赏。

var App = React.createClass({
getInitialState: function(){
    return {
        val: 0   
    }
},
counterUpdate: function(){
    this.setState(function(previousState, props){
        return {
            val: previousState.val + 1   
        }
    })
},
mount: function(){
    ReactDOM.render(<Counter cu={this.counterUpdate} >{this.state.val}</Counter>, document.getElementById('a'))   
},
render: function(){
    return (
        <div>
            <button onClick={this.mount}>MOUNT</button>
            <div id="a"></div>
        </div>
        )
}
});

var Counter = React.createClass({
 render: function(){
    return (
            <button onClick={this.props.cu}>{this.props.children}</button>
        )
 }
});

ReactDOM.render(<App />, document.getElementById('content'));

Answer 1

我不知道你的代码无法正常工作的具体细节，但在组件内部调用ReactDOM.render是一种奇怪的方法来处理它。我可能会做以下事情：

var App = React.createClass({
getInitialState: function(){
    return {
        val: 0,
        showCounter: false, 
    }
},
counterUpdate: function(){
    this.setState(function(previousState, props){
        return {
            val: previousState.val + 1   
        }
    })
},
mount: function() {
    this.setState({showCounter: true});
},
render: function(){
    return (
        <div>
            <button onClick={this.mount}>MOUNT</button>
            {
              this.state.showCounter ? (<Counter cu={this.counterUpdate} >{this.state.val}</Counter>) : null
            }
        </div>
        )
}
});

在反应组件中继承State

1 个答案: