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

Question

我们有一个疯狂的DOM层次结构,我们已经在道具中传递JSX而不是嵌入子节点.我们希望基类管理显示子项的哪些文档,以及哪些子项停靠或附加到其关联文档窗口的顶部.

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

---

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

我不想每次都重新声明每一行,因为这些行在基类中附加了额外的状态,而基类需要知道实际更改了哪些行.如果我不重新声明行,这很容易.

---

我不知道如何在Custom Form中实际处理JSX行.

1. Refs只能附加在子程序中render().如果CustomForm想要测量JSX元素或编写内联CSS怎么办？怎么可能在CustomForm.state中存在JSX元素,但也有一个ref？我可以克隆元素并在CustomForm中保留一个虚拟DOM(带有引用),或者依赖基类来提供深度嵌套的安装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的一个很棒的视频课程:Redux入门

Answer 2

问题是内容如下，并且由于某种原因无法有效地保留未更改的子实例（无需重写整个templateForChild）。

constructor (props) {
  super(props);

  // --- can't include refs --->
  // --- not subroutine of render --->
  this.state = {
    templateForChild: [
      <SomeComponentInstance className='hello' />,
      <AnotherComponentInstance className='world' />,
    ],
  };
}

componentDidMount () {
  this.setState({
    templateForChild: [ <div className='sometimes' /> ],
  }); // no refs for additional managing in this class
}

render () {
  return ( <OtherManagerComponent content={this.state.templateForChild} /> );
}

1. 我相信答案可能是包含一个 ref 回调函数，而不是一个 string，正如 Dan Abramov 提到的那样，尽管我还不确定 React 是否仍然会发出警告。这将确保 CustomForm 和 BaseClass 被分配相同的ref实例（当props.ref执行回调时）

2. 答案是可能使用keyor createFragment。一篇不相关的文章解决了重新安装问题。不确定该片段是否仍包含相同的实例，但文章确实是这样读的。这可能是 的目的key，而不是ref，它是为了查找 DOM 节点（尽管findDOMNode(ref)如果!(ref instanceof HTMLElement).