javascript - React - 对未安装的 JSX 行进行适当的状态管理？

Question

我们有一个疯狂的 DOM 层次结构，我们一直在 props 中传递 JSX，而不是嵌入子元素。我们希望基类管理显示哪些子文档，以及将哪些子文档停靠或附加到其关联文档窗口的顶部。

• List(疯狂的物理学将内联样式写入基类包装器)
  1. 自定义表单(将 JSX 行传递给基类)
     • 基类(连接到列表)
  2. 自定义表单(将 JSX 行传递给基类)
     • 基类(连接到列表)

---

问题是我们正在传递深度嵌套的 JSX，状态管理/访问表单中的引用是一场噩梦。

我不想每次都重新声明每一行，因为这些行在基类中附加了附加状态，基类需要知道哪些行实际发生了变化。如果我不重新声明行，这很容易。

---

我不知道如何实际处理自定义表单中的 JSX 行。

1. Refs 只能附加在 render() 的子例程中。如果 CustomForm 想要测量 JSX 元素或编写内联 CSS 怎么办？那个 JSX 元素怎么可能存在于 CustomForm.state 中，而且还有一个 ref？我可以克隆 Element 并在 CustomForm 中保留一个虚拟 DOM(带有 refs)，或者依赖于基类来提供深层嵌套、挂载的 ref。
2. 我认为从现有状态编写组件状态是不好的做法。如果 CustomForm 状态发生变化，并且我想更改传递给 BaseClass 的行，我必须使用 shouldComponentUpdate 进行限制，重新声明该阶段文档(维护行对象引用)，然后在总体上调用 setState收藏。 this.state.stages.content[3].jsx 是唯一改变的东西，但是当它看到 props.stages 时，我必须遍历 BaseClass 中每个阶段文档中的每一行 改变了。

---

处理 JSX 集合有什么技巧吗？难道我做错了什么？这一切似乎过于复杂，我宁愿不遵循一些反模式使问题恶化。

---

自定义表单:

render () {
  return <BaseClass stages={this.stages()}/>
}

stages () {
  if (!this._stages) this._stages = { title: this.title(), content: this.content() };
  return this._stages;
}

title () {
  return [{
    canBeDocked: false,
    jsx: (
      <div>A title document row</div>
    )
  }
}

content () {
  return [{
    canBeDocked: false,
    jsx: (
      <div>Hello World</div>
    )
  }, {
    canBeDocked: true,
    jsx: (
      <div>Yay</div>
    )
  }
}

Answer 1

我通常做的只是通过 Redux 连接底层组件。这有助于避免从最顶层组件以大块的形式传递状态。

React 创作者之一 Dan Abramov 的精彩视频类(class):Getting started with Redux