ReactコンポーネントのborderColorを変更する

Question

コンポーネントの色を別のボタンからクリックしないように変更する方法。 私は状態を設定することでこれを試みていますが、不可能です。そして、コンポーネントSecondAnotherBoxのこれは、プロパティのスタイルではありません。

var AnotherBox = React.createClass({ 
    boxclick: function() 
    { 
     //change from here 
    }, 
    render: function() 
    { 
     return(
     <div onClick={this.boxclick}> anotherbox</div>) 
    } 
}); 
var SecondAnotherBox = React.createClass({//change this 
    render: function() 
    { 
     return(
     <div> secondanotherbox</div>) 
    } 
}); 
var ComplexBox = React.createClass({ 
    render: function() 
    { 
     return(
     <div> 
     <AnotherBox /> 
     <SecondAnotherBox /> 
     </div>) 
    } 
}); 
ReactDOM.render(
    <ComplexBox />, 
    document.getElementById('test') 
); 

Answer 1

あなたがAnotherBoxとSecondAnotherboxとの3要素

ComplexBoxを持っています。

• ComplexBoxにあなたの状態を維持してください。
AnotherBoxにonBoxClickプロパティを追加して、{this.props.onBoxClick}へのonClickを接続ComplexBoxに
• あなたboxClick機能を移動
• はSecondAnotherBox色にプロパティを追加し、
• 値として "ComplexBox.state.color" を使用しますboxClickの機能変更で "ComplexBox.state.color"

それはコードでこのようになります...

var AnotherBox = React.createClass({ 

     render: function() 
     { 
      return(
      <div onClick={this.props.onBoxClick}> anotherbox</div>); 
     } 
    }); 

    var SecondAnotherBox = React.createClass({//change this 
     render: function() 
     { 
      return(
      <div style={{ borderColor: this.props.color }}> secondanotherbox</div>); 
     } 
    }); 

    var ComplexBox = React.createClass({ 
     getInitialState: function() { 
      return { 
       color: 'blue' 
      }; 
      }, 
     boxclick: function() 
     { 
      //change from here 
      var newColor = this.state.color == 'red'?'blue':'red'; 

      this.setState({ 
       color: newColor 
      }) 
     }, 
     render: function() 
     { 
      return(
      <div> 
       <AnotherBox onBoxClick={this.boxclick} /> 
       <SecondAnotherBox color={this.state.color} /> 
      </div>); 
     } 
    }); 

    ReactDOM.render(
     <ComplexBox />, 
     document.getElementById('test') 
    ); 

Answer 2

あなたが好きな場合は+ CSSセレクタでこれを行うことができます。 pen here

これは非常に脆弱だと思う。 DOMレイアウトを少し変更するとこれが破られます。あなたはreduxのようなグローバル状態マネージャーを使い、この情報を小道具としてコンポーネントに渡す方がずっと優れています。

編集：これは、反応状態のみを使用しても達成できます。 もう1つpen for demoです。

Answer 3

は、なぜあなたはそのように、あなたのコンテナComplexBoxに状態を配置しようといけない：

var AnotherBox = React.createClass({ 
    boxclick: function() 
    { 
     //change from here 
    }, 
    render: function() 
    { 
     return(
     <div 
      onClick={this.boxclick} 
      style={ this.props.boxClicked === 1 ? color: blue } 
     > 
      anotherbox 
     </div> 
    ) 
    } 
    }); 
var SecondAnotherBox = React.createClass({//change this 
    render: function() 
    { 
    return(
     <div style={ this.props.boxClicked === 2 ? color: blue }> secondanotherbox</div>) 
    } 
}); 
var ComplexBox = React.createClass({ 

    constructor: function() { 
    this.state: { boxClicked: 1 } 
    } 
    render: function() 
    { 
    return(
     <div> 
     <AnotherBox 
      boxClicked: this.state.boxClicked 
     /> 
     <SecondAnotherBox 
      boxClicked: this.state.boxClicked 
     /> 
     </div>) 
    } 
}); 
ReactDOM.render(
    <ComplexBox />, 
    document.getElementById('test') 
);