reactjs - 如何在 React 中设置一个组件与另一个组件的状态？

Question

我有一个组件不会呈现这样的内容:

var Application = react.createClass .....

function(....)

module.exports = Application

还有另一个组件，如下所示:

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

我想更改应用程序标签中提交的状态。这可能吗？

Answer 1

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

我就是这样做的。

如果您需要从应用程序设置标签的状态，您可以执行以下两件事之一:

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

componentDidMount: function() {

    //other code...

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

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

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

<Tags ref=tagsRef />

然后，在应用程序的某些代码中，您可以执行以下操作:

this.refs.tagsRef.setState({})

编辑:实际上，重读后，您似乎没有在应用程序中渲染。我认为它是您整个应用程序的父级。不确定为什么你不在应用程序中渲染，但足以说明你可能想使用像 Flux 这样的东西。