Javascript 如何为jQuery日期选择器创建React.js内联门户

我看了,

读到

我得到了门户的概念，你在欺骗React停止对一块DOM的渲染，然后继续渲染，这样你就可以通过使它的虚拟DOM失去同步来修补那块DOM，而不会混淆React

我的问题是，这些示例都涉及一个对话框，该对话框在页面末尾呈现，但在查看代码时显示为内联。使用jQuery模式是一个很酷的技巧，但是我需要一个jQuery日期选择器，它的div实际上保留在我放置它的地方。（顺便说一句，我也对GetDOMNode在示例中的出现感到好奇，因为它是？我想您使用FindDOMNode，尽管您对它的称呼略有不同，另外文档中还说“在大多数情况下，不鼓励使用此转义图案填充，因为它穿透了组件抽象”，这让我有点不好意思使用它。）

为了将jQuery datepicker与React隔离开来，我最初创建了一个React组件来处理datepicker之上的所有内容，另一个组件来处理datepicker之下的所有内容，并在每个组件中使用事件侦听器来侦听更新。然而，我更喜欢单亲组件的设计，它将所有东西传递给它的子组件；这似乎是一个更干净的设计

我用一个单亲重新设计了它，它似乎可以工作，但我不知道我的门户是否真的与React的虚拟DOM隔离；这是我第一次闯入入口，所以我真的混过去了。（我正在为我的导航栏使用React引导，它工作得很好；我只是找不到一个与jQuery的datepicker相当的工具，我喜欢它的外观和操作方式，这就是我坚持使用它的原因。）

这是我的顶级组件（为了清晰起见，我移除了props/componentDidMount/etc）。

将成为门户：

var ReactApp = React.createClass({

    render: function() {
        return (
            <div>
                <BootstrapNavbar division={this.state.division} dps={this.state.dps} sections={this.state.sections} />

                <div className="container">
                    <br />
                    <br />
                    <br />

                    <div className="row">
                        <div className="col-md-4" id="calendarPortal">
                            <CalendarControl />
                        </div>
                        <div className="col-md-8">
                            <h3>{this.state.dp}</h3>
                            <h4>{this.state.dpStartDate} - {this.state.dpEndDate}</h4>
                        </div>
                    </div>

                    <TimebookTableRecords timebookRecords={this.state.timebookRecs} />
                </div>
            </div>
        );
    }
});

下面是jQuery代码，它在

calendarControl

div上创建了一个日期选择器：

$("#calendarControl").datepicker({
   numberOfMonths: monthDiff,
   defaultDate: dpStartDate,
   showButtonPanel: false, 
   beforeShowDay: formatCalendarDays, //formatter function
   onSelect: dateClicked //handles click on calendar date

最终的产品似乎工作正常，并且不会产生任何“DOM意外变异”错误，比如当您操作React权限范围内的部分DOM时。我可以更新父级的状态，看到更改很好地向下传播，并使用jQuery更新日历

然而，我只是不知道这是否是正确的方法？也就是说，我在这里实现了真正的门户吗？我使用Google Chrome React Developer Tools插件来检查组件层次结构，从React的角度来看，

CalendarControl

div中似乎有一个空值：

$("#calendarControl").datepicker({
   numberOfMonths: monthDiff,
   defaultDate: dpStartDate,
   showButtonPanel: false, 
   beforeShowDay: formatCalendarDays, //formatter function
   onSelect: dateClicked //handles click on calendar date

---

感谢您在这篇冗长的文章中对我的支持。我不得不说，到目前为止，我真的很喜欢网络开发的React方法；它完全不同，需要大量阅读和修改才能理解它的概念，但现在它似乎比我过去的方式优雅得多。

从我对门户的理解来看，你的做法基本上是正确的。但是如果它有任何其他子项，那么在jquery之后您必须重新连接react，但我假设这里不是这样

在calendar控件中看到“null”的原因是，在CalendarControl呈现函数中返回null

为什么不将calendarControl中的渲染函数更改为：

render: function () {
   return (
         <div id="calendarControl"></div>
)

render:function（）{
返回(
)

---

在componentDidMount函数中进行所有时髦的jQuery渲染？

这似乎是一种更好的方法，尤其是在componentDidMount中使用jQuery，因为代码都在一个地方，并且更清楚发生了什么。我还喜欢在组件中渲染calendarControl div的想法，因为它消除了需要calendarPortal部门。谢谢你回答这个问题——我刚刚得到了一个可疑的“风滚草”徽章，因为我发布了一个没有答案、浏览量很低的问题。这既有趣又尴尬。