reactjs:为什么在render中定义的一些dom元素显示两次

reactjs: why some dom elements defined in `render` show twice?

本文关键字：显示 元素 dom 两次 为什么 render 定义 reactjs      更新时间：2023-09-26

我是reactjs的新手，我有一些代码可以使用bootstrap日期范围选择器，但我的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>
        );
    }
});

<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/>下的引号"显示在元素窗格中"，它对应于html中的第二个<span></span>。这让我很沮丧，我不知道发生了什么。

React的最佳实践是完全避免使用jQueryDOM修改方法。大多数jQuery插件都会与React的DOM困难相冲突，并导致难以修复的问题。

在您的案例中，有一个名为react bootstrap daterangepicker的bootstrap日期选择器端口。在尝试将jQuery与React混合之前，我想看看这是否适用于您的项目。

相关文章：