Semantic.ui 下拉菜单不适用于 React.js答案

【问题标题】：Semantic.ui dropdown not working with React.jsSemantic.ui 下拉菜单不适用于 React.js
【发布时间】：2016-05-19 04:10:05
【问题描述】：

我正在尝试在 Meteor.js + React.js 应用程序中使用 Semantic.ui 的下拉菜单。 Semantic.ui 的其他一切工作正常，但我无法使下拉菜单工作。这是我的代码：

NavigationMain = React.createClass({

  componentDidMount() {
    $('.ui.dropdown.right').dropdown();
  },

  componentDidUpdate() {
      $('.ui.dropdown.right').dropdown('refresh');
  },

  _openChat(){
    console.log("click");
  },

  render(){
    return (
      <div className="ui top attached menu">
        <div className="ui dropdown icon item" onClick={this._openChat}>
          <i className="comments outline icon"></i>
        </div>
        <div className="ui dropdown right icon item">
          <i className="wrench icon"></i>
          <div className="menu">
            <div className="item">
              <i className="dropdown icon"></i>
              <span className="text">New</span>
              <div className="menu">
                <div className="item">Document</div>
                <div className="item">Image</div>
              </div>
            </div>
            <div className="item">
              Open...
            </div>
            <div className="item">
              Save...
            </div>
            <div className="item">Edit Permissions</div>
            <div className="divider"></div>
            <div className="header">
              Export
            </div>
            <div className="item">
              Share...
            </div>
          </div>
        </div>
      </div>
    );
  }
});

我也尝试过使用 Reacts ref 属性来引用这样的元素： $(this.refs.menu).dropdown();

但这似乎也无济于事。

我找到的所有示例，例如 Semantic.ui 的官方集成文档 (http://semantic-ui.com/introduction/integrations.html)，都是这样工作的，而且我之前在没有 React 的情况下也能正常工作。这就是我开始感到无助的原因。

对此的任何帮助将不胜感激。

【问题讨论】：

标签： meteor reactjs semantic-ui

【解决方案1】：

为我工作。

    var Content = React.createClass({
    componentDidMount: function() {
      $('.ui.dropdown').dropdown()
    },
    render: function () {
        return <div className="ui dropdown">
          <div className="text">File</div>
          <i className="dropdown icon" />
          <div className="menu">
          <div className="item">New</div>
          <div className="item">
          <span className="description">ctrl + o</span>
          Open...
          </div>
          <div className="item">
          <span className="description">ctrl + s</span>
          Save as...
          </div>
          <div className="item">
          <span className="description">ctrl + r</span>
          Rename
          </div>
          <div className="item">Make a copy</div>
          <div className="item">
          <i className="folder icon" />
          Move to folder
          </div>
          <div className="item">
          <i className="trash icon" />
          Move to trash
          </div>
          <div className="divider"></div>
          <div className="item">Download As...</div>
          <div className="item">
          <i className="dropdown icon" />
          Publish To Web
          <div className="menu">
          <div className="item">Google Docs</div>
          <div className="item">Google Drive</div>
          <div className="item">Dropbox</div>
          <div className="item">Adobe Creative Cloud</div>
          <div className="item">Private FTP</div>
          <div className="item">Another Service...</div>
          </div>
          </div>
          <div className="item">E-mail Collaborators</div>
          </div>
        </div>
    }
});

ReactDOM.render(
    <Content />,
    document.getElementById('container')
);
Here is a fiddle
https://jsfiddle.net/85z7o3n2/

【讨论】：