如何在 react.js 中使用 setProps答案

【问题标题】：how to use setProps in react.js如何在 react.js 中使用 setProps
【发布时间】：2014-09-28 03:34:47
【问题描述】：

我想从myComponent 外部调用setProps，以便能够动态更改myComponent 的数据。
我希望在更改组件的道具后，它会重新渲染自己。

我正在尝试以下方法：

var myComponent = React.createClass({
  render: function () {
    return (
      React.DOM.div(null, this.props.data)
    );
  }
});

React.renderComponent(
  myComponent({ data: someData }),
  document.getElementById('predictionContent')
);

myComponent.setProps({data: someData2});

问题是我不明白如何为组件使用setProps。就我而言，我收到“未定义”错误。

如何解决？

【问题讨论】：

Pass new server data to react.js components 的可能重复项
旁注：myComponent 是组件类。 setProps 唯一起作用的地方是组件实例，您只能在组件的一个方法中使用this 或从渲染它的组件中使用this.refs。

标签： reactjs

【解决方案1】：

警告： setProps 是 now deprecated。

React.createClass 返回一个类，它是React.renderComponent，它返回一个具有setProps 方法的类的实例。

试试这个：

var MyComponent = React.createClass({
    render: function () {
        return React.DOM.div(null, this.props.data);
    }
});

var myComponent = React.renderComponent(
     new MyComponent({ data: someData }),
     document.getElementById('predictionContent')
);

myComponent.setProps({ data: someData2 });

话虽如此，Chad Scira 的回答也是正确的：重新渲染可能比调用 setProps 更好。这将使其看起来与 render() 方法中的代码相同，并且无论是第一次还是后续更新，您都可以随时调用 renderComponent。

像这样：

var MyComponent = React.createClass({
    render: function () {
        return React.DOM.div(null, this.props.data);
    }
});

React.renderComponent(
     new MyComponent({ data: someData }),
     document.getElementById('predictionContent')
);

// later
React.renderComponent(
     new MyComponent({ data: someData2 }),
     document.getElementById('predictionContent')
);

【讨论】：

感谢建议组件重新渲染。这帮了我很多忙。

【解决方案2】：

你不应该那样做。而是像这样再次运行 renderComponent 方法：

React.renderComponent(
     myComponent({ data: someData2 }),
     document.getElementById('predictionContent')
);

react 会自动解决差异

【讨论】：

如果无法从组件外部更改 props，为什么还要设置 setProps 功能？
@31415926 见the setProps docs；他们试图阻止它（有充分的理由）。它主要是早期反应版本的遗物。