javascript - 语义 ui 下拉菜单在 react 中不起作用？

Question

我最近学习了语义 UI，一切都可以顺利进行，直到出现下拉菜单。代码如下:

render() {
    return (<div className="ui form">
                        <div className="field">
                            <div className="ui selection dropdown">
                                <input type="hidden" name="options"/>
                                <i className="dropdown icon"></i>
                                <div className="default text">Options</div>
                                <div className="menu">
                                    <div className="item">Option 1</div>
                                    <div className="item">Option 2</div>
                                </div>
                            </div>                                                                          
                        </div>
                    </div>);
}

除了react和semantic-ui之外，我没有使用任何css或库，它只是显示了一个无法单击的下拉菜单，对此有什么想法吗？

Answer 1

来自Semantic UI docs :

Any select element initialized as dropdown will also be hidden until Javascript can create HTML, this is to avoid the flash of unstyled content, and the change in element height adjusting page flow.

您必须添加以下 JavaScript 才能使下拉菜单正常工作

$('.ui.dropdown').dropdown();