组件未使用所有功能呈现答案

【问题标题】：Component not rendered with all features组件未使用所有功能呈现
【发布时间】：2016-04-16 11:37:29
【问题描述】：

我有一个带有以下渲染方法的 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"); 语句没有任何作用，因为控制台上没有打印任何内容。

为什么这个组件只是部分渲染？

【问题讨论】：

标签： javascript css twitter-bootstrap reactjs

【解决方案1】：

日志语句没有显示很奇怪。您确定您在浏览器中检查了正确的控制台窗口吗？你的项目中还包含 jQuery 吗？

有时使用 vanilla react 和 bootstrap 非常烦人。签出react-bootstrap - 它让处理这两者变得更容易一些。

【讨论】：