javascript - 在 ReactJS 中，为什么当我尝试包装 jquery 对话框时，componentDidMount 不断被调用？

Question

我关注了this guide about using DOM libraries like jquery UI alongside reactJS 。我最终使用以下代码来测试当我更改对话框的属性时会发生什么，在本例中是标题。

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

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

Answer 1

一般来说，您不应该调用 React.render组件内部。每次间隔计时，您都会卸载并重新安装对话框，从而触发 componentDidMount 。每次发生这种情况时，它都会初始化并打开对话框，从而导致您所看到的行为。

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

我还建议删除您的 open支持你的Dialog组件并让 React 处理卸载过程。您可以决定是否渲染Dialog 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')
  );
});

我还没有对此进行测试，但它应该能让您了解我在说什么。