从旧的外部 Javascript 更改 React 组件的状态？答案

【问题标题】：Change state of React component from old external Javascript?从旧的外部 Javascript 更改 React 组件的状态？
【发布时间】：2014-11-19 11:45:03
【问题描述】：

如何从旧的 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 破坏。

【问题讨论】：

我认为通过设计，状态突变应该是内部的，所以如果你想从外部改变它，你应该使用道具。这意味着在您的情况下将您的组件分成两部分。 IE：将您的状态移动到包含您的 jquery 汤触发器的东西，从而解决您的问题。
@plus 很高兴知道状态突变应该只是内部的。我不明白你的意思 "encompassing your jquery soup trigger" 是什么意思——你的意思是状态应该放在组件之外，我会将状态修改器作为道具传递给组件吗？（如 kulesa 的回答。）

标签： javascript jquery reactjs legacy

【解决方案1】：

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

【讨论】：