未使用所有功能呈现的组件

Question

我有一个带有以下渲染方法的React组件：

  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 - 它使处理更容易一些。