Inheritance react组件中的继承状态

我试图将状态属性“val”传递给“Counter”组件，并在单击挂载按钮时让“Counter”显示其更新值。我的问题是，我可以传递“counterUpdate”函数并从“Counter”调用它，但是我无法在视图中更新“props.children”值，即使我正在更新“state.val”。 如果您有任何关于为什么会这样的想法和建议，我们将不胜感激

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

var-App=React.createClass({
getInitialState:函数（）{
返回{
瓦尔：0
}
},
计数器更新：函数（）{
this.setState（函数（先前状态、道具）{
返回{
val:previousState.val+1
}
})
},
mount:function（）{
ReactDOM.render（{this.state.val}，document.getElementById（'a'））
},
render:function（）{
返回(
攀登
)
}
});
var Counter=React.createClass({
render:function（）{
返回(
{this.props.children}
)
}
});
ReactDOM.render（，document.getElementById（'content'））；

我不知道代码不起作用的具体原因，但在组件内调用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>
        )
}
});

var-App=React.createClass({
getInitialState:函数（）{
返回{
瓦尔：0，
展示台：错，
}
},
计数器更新：函数（）{
this.setState（函数（先前状态、道具）{
返回{
val:previousState.val+1
}
})
},
mount:function（）{
this.setState（{showCounter:true}）；
},
render:function（）{
返回(
攀登
{
this.state.showCounter？（{this.state.val}）：null
}
)
}
});

那么，有一个按钮可以计算点击次数吗？是的，它会显示点击次数，这就是问题所在。