Реагировать родительское состояние доступа от дочернего объекта

Question

Как я могу отобразить состояние из дочернего элемента внутри родительского элемента в React?

var Form = React.createClass({ 
    render: function() { 
     return (
     <form> 
      <h1>***CHILD STATE CHECKED***</h1> 
      {this.props.children} 
     </form> 
     ) 
    } 
}) 

var Checkbox = React.createClass({ 
    getInitialState: function() { 
     return { 
      checked: true 
     } 
    }, 

    toggle: function() { 
     this.setState({ 
      checked: !this.state.checked 
     }); 
    }, 

    render: function() { 
     return (
      <div onClick={this.toggle} aria-checked={this.state.checked} role="checkbox"></div> 
     ); 
    } 
}) 

ReactDOM.render(
    <Form> 
     <Checkbox /> 
    </Form>, 
    document.querySelector('#app') 
); 

Каков наилучший способ отображения состояния ребенка внутри своего родителя (особенно внутри этого тега в родительском компоненте)? Возможно ли это без «уродливых трюков»?
Я хочу добавить некоторые узлы или другие компоненты в форму, когда флажок установлен.

Answer 1

Не переключайте переключатель в флажке. Передайте обратный вызов из класса Form в класс CheckBox.

В классе формы:

return(
     <CheckBox onClick={this.onClick} /> 
) 

    onClick(){ 
     console.log('Checkbox clicked'); 
    } 

В классе CheckBox:

<div onClick={this.props.onClick} aria-checked={this.state.checked} role="checkbox"> 

Управление состоянием в родительском классе, а не в дочернем классе.