コンポーネントのすべての機能を

Question

をレンダリングしていない私は、次のようにコンポーネントに反応している方法でレンダリング：

render: function() { 
    console.log("In render method"); 
    return (
     <div> 
     <div className="dropdown"> 
      <button onClick={this.displayRest} className="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
      Dropdown 
      <span className="caret"></span> 
      </button> 
      <ul className="dropdown-menu" aria-labelledby="dropdownMenu1"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" className="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </div> 
    </div> 
    ); 
    } 

コンポーネントは次のように表示されます

だから、ドロップダウンボタンが表示されますが、応答しません。私がクリックすると、ドロップダウンは表示されません。

また、console.log("In render method");というステートメントは、コンソールに何も表示されないため、何の効果もありません。

このコンポーネントは部分的にレンダリングされるのはなぜですか？

Answer 1

ログステートメントが表示されないのは間違いです。ブラウザで正しいコンソールウィンドウを確認してもよろしいですか？また、あなたのプロジェクトの中にjQueryが含まれていますか？

バニラ反応とブートストラップで作業するのはかなり厄介です。 react-bootstrapをチェックしてください - 両方の処理が少し楽になります。