Question

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

我这样定义了这个类：

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>
        );
    }
});

是日期范围文本的占位符。我在daterangepicker插件中执行了操作：

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

然而，在加载页面后，我看到彼此相邻的两个具有完全相同的文本。我视察了元素：

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

我安装了反应铬调试器并检查控制台：

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

如果我这样做＆＃34;在元素窗格中显示＆＃34;对于下的引号，它对应于html中的第二个。这让我非常糟糕，我无法弄清楚发生了什么。

Answer 1

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

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

reactjs：为什么`render`中定义的一些dom元素显示两次？

1 个答案: