javascript - 组件未呈现所有功能

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 吗？

有时使用 vanilla react 和 bootstrap 会很烦人。查看react-bootstrap - 它使处理两者更容易一些。