引导选择样式不起作用

Question

我已经安装了 Bootstrap-Select 包，版本 1.13.1。

https://silviomoreto.github.io/bootstrap-select/

问题

我想在我的 reactJS + Bootstrap 项目中实现多选功能。但是，样式似乎与文档示例中显示的不同。我的仍然显示“基本”类型的风格。

我错过了什么？

我做了什么

我在我的 jsx 文件中放入了下面的部分。

class MyTestBox extends React.Component {
//blah blah
render() {
//blah blah
<div class="row">
    <div class="col-xs-3">
        <div class="form-group">
            <select class="selectpicker form-control" multiple>
                <option>Mustard</option>
                <option>Ketchup</option>
                <option>Relish</option>
            </select>
        </div>
    </div>
</div>
}}

var MyTestBox = ReactDOM.render(
    <MyTestBox />,
    document.getElementById('content')
);

这是我的 cshtml 文件。

@{
    ViewBag.Title = "Hello World";
}

//blah blah
<div id="content"></div>

@Scripts.Render("~/bundles/myTestBundle")
<script type="text/javascript">
    $(function () {
        $('.selectpicker').selectpicker();
    });
</script>

根据其他帖子，似乎我仍然需要在某处添加 URL 以引用引导选择库。我也应该这样做吗？如果是，如何？

Bootstrap Select style and search not working

Bootstrap select picker style not working

Answer 1

将class 替换为className，因为JSX 不支持class attribute 在JSX 中被className 替换。

<div class="row">

到

<div className="row">

你可以使用componentDidMount，但我会一次又一次地初始化selectpicker代码，所以如果你的插件可以正常工作，那么就使用

class abc extent React.Component{
    componentDidMount(){
      $('.selectpicker').selectpicker();
    }
}

//第二个选项

使用window.onload当您的应用完全准备好时初始化您的代码一次

<script>
window.onload = function(){
      $('.selectpicker').selectpicker();
}
</script>