Question

进入ReactJS，我正在构建TodoList-of-TodoLists，这是一个由数字ID标识的一些项目的两级深度动态列表。项目具有通过其api从第三方服务检索的扩展详细信息。

React组件结构如下：

App {
  Level0Form,
  Level0List [
    Level0Item {
      Title: "ABC",
      Level1Form,
      Level1List [
        Level1Item {
          id: 123,             // given initially
          url: "abc",          // - updated after ajax call
          image: "image1.jpg", // - updated after ajax call
        }, ..
      ]
    }, ..
  ]
}

最初应用仅加载Level0 标题 + Level1 ID 。然后它对ext进行异步调用。用于根据每个唯一 id 检索 url 和图像（在此示例中）的API。在交互式添加新的Level1项目时也是如此。

ReactJS传递这些＆＃34;装饰＆＃34;的方法是什么？细节：

从根到道具链，或
让每个Level1项目请求自己的详细信息，将它们存储在一个州？

用户不会更改仅用于显示目的的详细信息。

Answer 1

道具：

将数据传递给子组件的方式
不可变
通过道具

<强> 状态

由您的顶级组件（视图控制器）维护。
mutable
不要使用它将数据传递给子组件

TL; DR; - 使用道具将数据传递给子组件。

Answer 2

理想情况下，当组件安装componentDidMount时，您的组件将执行ajax调用，当它返回时，您将把ajax请求中的数据（无论是文本，图像还是数据）添加到状态{ {1}}。

如果您选择从父母传下来，则需要通过this.setState接收新道具，然后更新州。

componentWillReceiveProps是关键，因为无论何时设置组件，所有子组件都将重新渲染。如果您现在拥有来自ajax的新数据，则需要重新渲染以显示更改。

但这是非常基本的反应。返回并再次阅读文档。 https://facebook.github.io/react/docs/component-specs.html

ReactJS道具与州：最终项目细节

2 个答案: