Javascript 在ReactJS中，为什么componentDidMount在尝试包装jquery对话框时总是被我调用？

我跟着。最后，我用下面的代码来测试当我更改对话框的道具时会发生什么，在本例中，它就是标题

var Dialog = React.createClass({
  render: function() {
    return React.DOM.div();
  },

  componentDidMount: function() {
    this.node = this.getDOMNode();
    this.dialog = $(this.node).dialog({
      title: this.props.title
    }).data('ui-dialog');

    this.renderDialogContent(this.props);
  },

  componentWillReceiveProps: function(newProps) {
    this.renderDialogContent(newProps);
  },

  renderDialogContent: function(props) {
    React.render(React.DOM.div({}, props.children), this.node);

    if (props.open)
      this.dialog.open();
    else
      this.dialog.close();
  },

  componentWillUnmount: function() {
    this.dialog.destroy();
  },
});

var MyApp = React.createClass({
  render: function() {
    return <Dialog title={"Dialog - " + (new Date().getTime()) - this.props.start} open={true}>
        <h2>This is my dialog content!!!</h2>
    </Dialog>
  }
});

$(document).ready(function()
{
    var start = new Date().getTime();

    setInterval(function() {
      React.render(
      <MyApp startTime={start}/>,
        document.getElementById('container')
      );
    }, 1000);
});

var Dialog=React.createClass({
render:function（）{
返回React.DOM.div（）；
},
componentDidMount:function（）{
this.node=this.getDOMNode（）；
this.dialog=$（this.node）.dialog({
标题：this.props.title
}).数据（“ui-dialog”）；
this.renderDialogContent（this.props）；
},
组件将接收道具：函数（新道具）{
此.renderDialogContent（newProps）；
},
renderDialogContent:功能（道具）{
render（React.DOM.div（{}，props.children），this.node）；
如果（道具打开）
this.dialog.open（）；
其他的
this.dialog.close（）；
},
componentWillUnmount:function（）{
this.dialog.destroy（）；
},
});
var MyApp=React.createClass({
render:function（）{
返回
这是我的对话内容！！！
}
});
$（文档）.ready（函数（）
{
var start=new Date（）.getTime（）；
setInterval（函数（）{
反应(
,
document.getElementById（'容器'）
);
}, 1000);
});

---

对话框弹出，但每次间隔都会创建另一个对话框。对话框的componentDidMount函数每秒调用一次。我在这里做错了什么吗？

通常，您不应该在组件内部调用

React.render。每次间隔滴答作响时，您都会卸载并重新装载对话框，从而触发
componentDidMount
。每次发生这种情况时，它都会初始化并打开对话框，从而导致您看到的行为

我会将
startTime
道具移动到
MyApp
的状态，然后在
MyApp
的
componentDidMount
事件中设置间隔函数。间隔函数应该调用
setState
，而不是
React.render
。这将导致新时间向下流到您的
对话框
组件，该组件可以使用
组件WillReceiveProps
事件更新对话框的
标题
选项，而无需重新初始化jQuery

我还建议删除
对话框
组件上的
打开
道具，让React处理卸载过程。您可以根据状态决定是否在
MyApp
中呈现
对话框
组件

大概是这样的：

var Dialog = React.createClass({
  render: function() {
    return <div>
      {this.props.children}
    </div>;
  },

  componentDidMount: function() {
    var dialog = $(this.getDOMNode()).dialog({
      title: this.props.title
    }).data('ui-dialog');
  },

  componentWillReceiveProps: function (newProps) {
    $(this.getDOMNode()).dialog('option', 'title', newProps.title);
  },

  componentWillUnmount: function() {
    $(this.getDOMNode()).dialog('destroy');
  }
});


var dialogInterval;

var MyApp = React.createClass({
  getInitialState: function() {
    return {
      openDialog: false,
      time: new Date().getTime()
    };
  },

  handleDialogToggleClick: function () {
    this.setState({openDialog: !this.state.openDialog});
  },

  render: function() {
    var dialog;

    if (this.state.openDialog) {
      dialog = <Dialog title={"Dialog - " + this.state.time}>
        <h2>This is my dialog content!!!</h2>
      </Dialog>;
    }

    return <div>
      <button onClick={this.handleDialogToggleClick}>
        Toggle the dialog
      </button>
      {dialog}
    </div>;
  },

  componentDidMount: function () {
    dialogInterval = setInterval(function() {
      this.setState({time: new Date().getTime()});
    }, 1000);
  },

  componentWillUnmount: function () {
    dialogInterval = null;
  }
});

$(document).ready(function() {
  React.render(
    <MyApp />,
    document.getElementById('container')
  );
});

var Dialog=React.createClass({
render:function（）{
返回
{this.props.children}
;
},
componentDidMount:function（）{
var dialog=$（this.getDOMNode（））.dialog({
标题：this.props.title
}).数据（“ui-dialog”）；
},
组件将接收道具：函数（新道具）{
$（this.getDOMNode（））.dialog（'option'，'title'，newProps.title）；
},
componentWillUnmount:function（）{
$（this.getDOMNode（））.dialog（'destroy'）；
}
});
var间隔；
var MyApp=React.createClass({
getInitialState:函数（）{
返回{
openDialog:false，
时间：新日期（）.getTime（）
};
},
handleDialogToggleClick:函数（）{
this.setState（{openDialog:！this.state.openDialog}）；
},
render:function（）{
var对话框；
if（this.state.openDialog）{
对话框=
这是我的对话内容！！！
;
}
返回
切换对话框
{dialog}
;
},
componentDidMount:函数（）{
dialogInterval=setInterval（函数（）{
this.setState（{time:new Date（）.getTime（）}）；
}, 1000);
},
componentWillUnmount:函数（）{
dialogInterval=null；
}
});
$（文档）.ready（函数（）{
反应(
,
document.getElementById（'容器'）
);
});

我还没有测试过这个，但它应该能让你了解我在说什么