Question

我有一个反应组件：

var Main = React.createClass({
  handleFoo: function() {
    self.setState(...);
  },
  ...
})

我用：

渲染它

var top = ReactDOM.Render(<Main />, document.getElementById("x"))

然后我从外部源接收数据，我想与顶级组件进行交互，所以我尝试了：

top.handleFoo()

但是我得到了

TypeError: top.handleFoo is not a function

从组件层次结构外部与顶级反应组件进行交互的正确方法是什么？

Answer 1

你究竟想做什么？

将数据传递给React通常使用props：

完成

var data = /* get your data from this external source */
ReactDOM.Render(<Main mydata={data} />, document.getElementById("x"))

这里我们获取一些数据，并将其作为名为mydata的道具传递给我们的主要组件。

从我们的组件中，我们可以使用我们收到的道具：

var Main = React.createClass({
  handleFoo: function() {
    var mydata = this.props.mydata;
    /* do what you want with data */
    self.setState(...);
  },
  ...
})

请注意，如果您要更新传递给Main的数据，则必须再次渲染，如果您想避免可以从组件中获取数据，或者管理您的数据使用redux和react-redux的应用程序状态。

您有什么理由不从组件内部获取数据吗？

Answer 2

应在组件内进行任何状态更改。与类交互的外部组件有两种类型：Parent和Peer。父组件可以通过发送新道具来改变状态。对等组件应使用事件更改状态。

在顶级反应组件上调用方法

2 个答案: