小编典典

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

reactjs

如何从旧的旧版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);

根据来自Facebook开发人员的电子邮件,这是一种反模式,因为他写的内容componentInstance可能会被React破坏。


阅读 353

收藏
2020-07-22

共1个答案

小编典典

我将使组件成为无状态。将ids数组存储在组件外部,并将其作为具有修改数组功能的prop传递。请参阅JSFiddle上的示例:http
//jsfiddle.net/ohvco4o2/5/
2020-07-22