在ReactJS中从父状态更新子道具

Question

我试图了解如何构建具有不同"页面"或"视图"的ReactJS应用程序。

我将以下组件作为我的基础应用程序，并且我正在React状态中使用currentState属性在视图中的活动组件之间切换。

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {currentState: 'Loading', recipes: []};
        this.appStates = {
            'Loading': <Loading/>,
            'Home': <RecipeList recipes={this.state.recipes}/>
        }
    }

    dataLoaded(data) {
        this.setState({
            recipes: data,
            currentState: 'Home'
        });
    }

    componentDidMount() {

        // AJAX Code that retrieves recipes from server and then calls dataLoaded
    }

    render() {
        return this.appStates[this.state.currentState];
    }
}

它执行此任务，但在启动dataLoaded回调时，组件从不接收更新的recipes数组。

如何根据应用程序中的更新状态更新道具？

还是我处理这整件事的方式错了？

Answer 1

我建议将构造函数中的所有组件代码推送到render函数内部。react的美妙之处在于，您可以以极低的成本完全重新渲染所有内容。React将努力比较DOM中的差异，只重新呈现最小的差异。

Answer 2

构造函数方法仅在组件挂载时执行，此时recipes为空，并将该空数组传递给AppState。从本质上讲，应用程序状态永远不会改变。

Answer 3

我认为你的观点并不是真正的反应，你至少有几个概念可以改进。

首先，我肯定会使用react-router来实现任何复杂的页面/组件之间的导航React.js.实现它自己是更复杂和容易出错。

其次，我认为您几乎不应该直接将内容存储在上下文this中。基本上是因为它会导致像您这样的错误：没有意识到appStates根本没有改变。React的状态是存储应用程序状态的一个很好的工具（有时必须用其他工具（如Redux）替换/补充）。

在将组件中应该呈现的内容存储在状态中的情况下，您可能应该使用构造函数中初始化的状态中的简单标志来补充react router功能，这些标志允许您知道在呈现函数中应该返回什么。

下面的示例演示了如何通过使用just React的状态，告诉组件在加载和加载之间动态更改其视图。当然，您可以在componentDidMount中调用AJAX并更改状态以在加载完成时停止加载，而不是使用按钮，从而重新创建一个非常类似的行为。

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {loading: true};
        this.stopLoading = this.stopLoading.bind(this);
    }

    stopLoading() {
        this.setState({
           loading: false,
        });
    }

    render() {
        let view=<div><h1>loading</h1><button onClick={this.stopLoading}>FINISH</button></div>;
        if(!this.state.loading){
          view=<h1>loaded</h1>;
        }
        return <div>{view}</div>;
    }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>