Как обновить состояние, не передавая его дочернему компоненту

Question

Это немного упрощенный пример моего текущего кода React.js.

https://jsfiddle.net/69z2wepo/14668/

var Main = React.createClass({ 
    getInitialState: function(){ 
     return { 
      showText: false 
     } 
    }, 
    handleClick: function(){ 
     this.setState({ 
      showText: true 
     }) 
    }, 
    render: function() { 
     return (
      <div> 
       <button onClick={this.handleClick}>Press me</button> 
       <Child showText={this.state.showText} /> 
      </div> 
     ) 
    } 
}); 

var Child = React.createClass({ 
    render: function(){ 
     if(this.props.showText){ 
      return (
       <div> 
        Pressed 
       </div> 
      ) 
     } 
     return (
      <div> 
       Default text 
      </div> 
     ) 
    } 
}); 

React.render(<Main/>, document.getElementById('container')); 

Когда я изменить showText свойство верно и передать его вниз к моему ребенку компонент, как я могу немедленно переключить showText ложь?

Что бы я хотел, это нечто подобное, за исключением того, что обратный вызов не должен отправляться ребенку.

handleClick: function(){ 
    this.setState({ 
     showText: true 
    }, function(){ 
     showText: false 
    }) 
} 

Мой Main компонент должен отправить только истинные, чтобы ребенок при нажатии кнопки. В противном случае я хочу, чтобы это состояние было ложным все время.

Answer 1

Из того, что я могу собрать из вашего описания, то это может быть, что вы хотите: https://jsfiddle.net/4vL3mubf/2/

Компонент Ребенок никогда не изменится после первого щелчка, но это то, что я предположил, что вы хотели.

В основном Основной компонент может перевернуть состояние с помощью этой функции:

componentDidUpdate: function(prevProps, prevState) { 
    if (this.state.showText === true) { 
     this.setState({showText: false}); 
    } 
}, 

Update

Изменено скрипку с использованием Джима shouldComponentUpdate. https://jsfiddle.net/4vL3mubf/3/

Answer 2

Вызов setState на ваш родительский компонент будет вызывать функцию render огонь, который, в свою очередь, будет вновь сделать свой Child компонент также. Вам нужно только когда-нибудь понадобиться setState для вашего родителя, а остальная часть иерархии должна перерисовываться в соответствии с этим родительским состоянием.

Answer 3

var updating = false; 

var Main = React.createClass({ 
    getInitialState: function(){ 
     return { 
      showText: false 
     } 
    }, 
    handleClick: function(){ 
     updating = !updating; 
     alert('is updating: ' + updating); 
     if(updating) { 
      this.setState({ 
       showText: true 
      }); 
     } 
    }, 
    render: function() { 
     return (
      <div> 
       <button onClick={this.handleClick}>Press me</button> 
       <Child showText={this.state.showText} /> 
      </div> 
     ) 
    } 
}); 

или другой способ:

var Child = React.createClass({ 
    shouldComponentUpdate: function(nextProps, nextState) { 
     return nextProps.showText; 
    }, 
    render: function(){ 
     if(this.props.showText){ 
      return (
       <div> 
        Pressed 
       </div> 
      ) 
     } 
     return (
      <div> 
       Default text 
      </div> 
     ) 
    } 
}); 

https://jsfiddle.net/69z2wepo/14670/