javascript - ReactJS:为什么 `render`中定义的一些dom元素显示两次？

Question

我是reactjs新手，我有一些代码可以与bootstrap-daterangepicker一起使用，但是我的React类中有一个dom组件render显示两次。

我这样定义类:

var DateRangePicker = React.createClass({
    render: function() {
        return (
            <div className="daterangepicker-container">
                <div className="daterangepicker-label"> Created between:</div>
                <div id={this.props.datepicker_id} className="daterangepicker-content">
                    <i className="icon-calendar icon-large"></i>
                    <span></span> <b className="caret"></b>
                </div>
            </div>
        );
    }
});

<span></span>是日期范围文本的占位符。我在daterangepicker中做了插件:

$(this).find("span").html(display_date(start, end));

但是，页面加载后，我看到两个 <span></span>彼此相邻并具有完全相同的文本。我检查了元素:

<div id="new_daterange" class="daterangepicker-content" data-reactid=".4.1.1">
    <i class="icon-calendar icon-large" data-reactid=".4.1.1.0"></i>
    <span data-reactid=".4.1.1.1">October 26th, 2015 - November 9th, 2015</span>
    <span data-reactid=".4.1.1.2">October 26th, 2015 - November 9th, 2015</span>
    <b class="caret" data-reactid=".4.1.1.3"></b>
</div>

我安装了 React chrome 调试器并检查控制台:

<div id="new_daterange" className="datepicker-content">
    <i className="icon-calendar icon-large'></i>
    <span/>
    " "
    <b className="caret"/>
</div>

如果我对 <span/> 下的引号执行“在元素 Pane 中显示” ，对应第二个<span></span>在 HTML 中。这让我很沮丧，我不明白发生了什么。

Answer 1

React 最佳实践是完全放弃使用 jQuery DOM 修改方法。大多数 jQuery 插件都会与 React 的 DOM-diffing 冲突并导致难以修复的问题。

在您的情况下，有一个名为 react-bootstrap-daterangepicker 的 bootstrap-datepicker 端口。在尝试将 jQuery 与 React 混合之前，我会看看这是否适用于您的项目。