从旧的外部Javascript更改React组件的状态?

时间:2014-09-24 20:42:36

标签: javascript jquery reactjs legacy

如何从旧的遗留jQuery汤中更改React组件的状态 码?

我有这样的组件:

var AComponent = React.createClass({
  getInitialState: function() {
    return { ids: [] }
  },
  render: function() {
    ...
  },
  onButtonClick: function() {
    ids.splice(…); // remove the last id
  }
});

当旧的jQuery汤代码发生特殊情况时,我想 将ID推送到AComponent.state.ids。我怎么能这样做?

一个"显而易见的"解决方案是一种反模式;这是:

var componentInstance = AComtonent({});
React.renderComponent(componentInstance, document.getElementById(...));

// Somewhere else, in the jQuery soup. Something special happens:
componentIntance.state.ids.push(1234);
componentIntance.setState(componentInstance.state);

根据this email from a Facebook developer,这是一个反模式, 因为他写道,componentInstance可能会被React摧毁。

1 个答案:

答案 0 :(得分:5)

我会让组件无状态。将ids数组存储在组件之外,并将其作为支柱传递,其中包含将修改数组的函数。请参阅JSFiddle上的示例:http://jsfiddle.net/ohvco4o2/5/