Question

在我们继续之前：Redux或Flux是不可能的，没有足够的时间来学习和正确测试/实施/记录

这是我的顶级组件。问题是我需要一种方法来为孩子们存储状态，但是他们没有在这里呈现，因此需要进行重组。

-- Both of these are in the render/return functions of my top level component

<SideNav {...tab_props} {...this.props} />
...
{React.cloneElement(this.props.children, { callback: this.callback.bind(this) })}

我正在寻求关于如何最好地重新设计我们的前端的建议，其主要目标是最小化请求，并最终在应用程序的某个位置缓存所需的数据。想法？

Answer 1

所以，经过大量的搜索和研究，我偶然发现了一篇很棒的博客文章，其中涵盖了我所需要的内容，结果发现我并不需要进行我最初认为必要的重大重组。

链接＆gt; Blog Post

所以，我要做的很简单。 React.cloneElement将在这里使用。我将映射所有子节点，这些子节点基于URL（使用react-router）进行渲染，并向它们传递状态以及一些回调函数（尚未为此用例创建）

看起来像这样，我也测试了它并且它有效！

render() {
let childWithState = React.Children.map(this.props.children, (child) => {
      return React.cloneElement(child, {state: this.state, callback: this.setParentState})
    })

...


return(
{childWithState}
)
}

所以，现在从这些子元素中，我只需要调用this.props.state.--insert-something--并且我可以访问。如果它不存在，我可以运行我的获取请求，然后在回调函数中设置父进程中的状态，这将立即重新呈现我的组件并让我访问父状态！

React Architecture重新设计

1 个答案: