你如何在反应中设置一个组件与不同组件的状态？

Posted 2023-02-22

【中文标题】你如何在反应中设置一个组件与不同组件的状态？

【英文标题】：How do you set the state of one component from a different component in react?

【发布时间】：2016-02-13 01:13:01

【问题描述】：

我有一个组件不会像这样渲染任何东西：

var Application = react.createClass .....

function(....)

module.exports = Application

还有一个像这样的组件：

var Tag = react.createClass....
  getInitialState
  //...
  functions
  //...
  setState( submit: false )
  render: 
  //...

我想从 Application 更改 Tag 中的提交状态。这可能吗？

【问题讨论】：

您必须发布事件并监听这些事件。 facebook.github.io/react/tips/…

React JS reference function in another component的可能重复

【参考方案1】：

虽然可以从应用程序更改标签的状态，但您确实不应该这样做。此外，我讨厌这些类型的答案，因为我不应该告诉你 bad vs.好的做法，我应该给你你所寻求的答案。

这就是我的做法。

如果您需要从应用程序中设置标签的状态，您可以做 2 件事之一：

A. 在应用程序上调用 setState，并将特定的道具传递给标签，您将检查是否应该设置状态。您可以在标签的componentWillReceiveProps 中查看这一点。根据收到的道具，您可以设置状态。请注意，componentWillReceiveProps 不会在 componentDidMount 运行时运行，因此您可能需要通过在 componentDidMount 末尾执行类似操作来强制它运行：

componentDidMount: function() 

    //other code...

    if (this.props.forceReceiveProps === true) 
        this.componentWillReceiveProps(this.props);
    

B.实现此目的的另一种方法是使用应用程序中标记的引用。

在应用程序中，您将渲染一些可能有标签的东西。做这样的事情：

<Tags ref=tagsRef />

然后，在应用程序的一些代码中，您可以这样做：

this.refs.tagsRef.setState()

编辑：实际上，在重读时，您似乎没有在 Application.我认为它是您整个应用程序的父级。不知道你为什么不在应用程序中渲染，但可以说你可能想要使用 Flux 之类的东西。