Question

假设我创建了一个可以根据状态打开/关闭的组件。

var onOff = React.createElement(<OnOff />, mountElement);
onOff.setState({ on: false });

后来我正在创建一个名为Parent的新组件，它将在其中使用OnOff。

render() { return <div><OnOff /></div> }

现在我该如何更改OnOff状态？我无法在其上调用setState。而且我不应该根据React doc。所以我必须为OnOff的道具添加初始状态：

constructor(props) {
    super(props);
    this.state = { on: props.initialOn };
}

然后在Parent的render方法中，将initialOn prop设置为其状态：

render() { return <div><OnOff initialOn={false} /></div> }

但它仍然无效，因为每当我更改Parent的状态时，其中的OnOff组件不会以新的初始状态重新创建。相反，它只用旧状态重新渲染。我有一个CodePen来证明它：http://codepen.io/anon/pen/QjMwjO?editors=101

Answer 1

您可以通过在componentWillReceiveProps函数中声明更新来更新OnOff组件的状态，如：

componentWillReceiveProps:  
  function(nextProps) { 
    this.setState({
      on : nextProps.initialOn
    });
}

这允许您在新道具到达时更新状态。这是有效的反应。

然而，您应该考虑是否需要OnOff中的状态：如果唯一的初始设置和所有更新仅来自其父组件，那么无状态组件会更好。

Answer 2

在“反应”中思考的重要事项之一＆＃34;是要弄清楚State属于哪个组件。

在React docs中阅读this

哪些组件应该具有状态？

您的大多数组件应该只从props中获取一些数据并进行渲染。但是，有时候你   需要响应用户输入，服务器请求或通过   时间。为此你使用状态。

尽量保持尽可能多的组件无状态。通过做   这样你就可以将状态隔离到最合乎逻辑的位置并最小化   冗余，使您更容易推理您的申请。

一种常见的模式是创建几个无状态组件   呈现数据，并在层次结构中具有位于它们之上的有状态组件   通过道具将其状态传递给其子女。有状态的   组件封装了所有的交互逻辑，而   无状态组件负责以声明方式呈现数据。

因此，您的OnOff不应该具有状态，而是使用从父级传递的属性。我在http://codepen.io/anon/pen/gaxbGm?editors=101

上说明了这一点

render() {
    writeLog("OnOff render called!")
    writeLog("Child: " + this.props.initialOn)
    return <span>{this.props.initialOn ? "On" : "Off"}</span>;
  }

我还建议阅读＆＃34; Thinking in React＆＃34;进一步澄清。

反应可重用的有状态组件

2 个答案: