![the]( "the")
本文介绍了如何避免“脱儿童道具"?在路线上的集装箱中?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个我想避免的似乎是我正在使用的反模式.
我有这样的路线:
<路由路径=登录"组件={登录}/><Route path="signup/:token" component={SignupConfirmation}/>{/* (ETC 其他未登录路由) */}<路由组件={requireAuthentication(LoggedInBase)}breadcrumbIgnore>{/* 显示项目和变体 */}<路由组件={ProjectRoot}breadcrumbName="Projects"><Route path="projects" component={Projects}/><Route path="projects/:projectId" component={Project}breadcrumbName="项目详情">
给定路由中的中间节点是 containers ...它们执行诸如从商店中获取必要数据等containers 应该做的事情.
我面临的挑战是，在每个中间 container 完成任务后，它必须从路线渲染子项，将所有好东西传递给道具.
但是
render() {return(<this.props.children {...this.props}>)}
不起作用，因为此时容器本身仍然是孩子！
所以我发现自己在做
render() {//(中间节点渲染逻辑，然后...)const childPage = React.Children.only(this.props.children)return(<div> {/* 中间节点渲染，然后... */}{React.cloneElement(childPage, {...nonChildProps(this.props)})}
)}
与
const nonChildProps = (props) =>{var {children, ...nonChildren} = props返回非儿童}
这太难看了——我一定是做错了什么.
如何在不导致此问题的情况下在路由上放置中间容器?
解决方案
反模式是将所有道具(带有传播)传递到一棵树下.
它来自一个论点我的中间组件不知道它下面的组件需要来自上面容器的 props.它甚至不知道它下面的组件，这可能会改变."(IE通过道具).
这反过来又来自对不同级别组件的效率问题，所有组件都具有获取相同基本数据并将其放在道具上的容器.获取常用数据并尽可能将其放在道具上以提高效率".
我得出结论，必须有更好的方法来处理那个问题……可能是时候引入 reselect，我刚刚才知道.
I have what seems to be an anti-pattern that I'm using that I'd like to avoid.
I have routes like this:
<Route path="/" component={internationalise(App)} breadcrumbIgnore>
<Route path="login" component={Login}/>
<Route path="signup/:token" component={SignupConfirmation}/>
{/* (ETC other non-logged in routes) */}
<Route component={requireAuthentication(LoggedInBase)} breadcrumbIgnore>
{/* Displaying projects and variations */}
<Route component={ProjectRoot} breadcrumbName="Projects">
<Route path="projects" component={Projects}/>
<Route path="projects/:projectId" component={Project} breadcrumbName="Project Details">
The intermediate nodes in a given route are containers ... they do stuff like fetching the necessary data from store etc that containers are supposed to do.
The challenge that I have is that in each intermediate container after it does it's stuff, it has to render the children from the route, passing them all that good stuff on the props.
But
render() {
return(<this.props.children {...this.props}>)
}
doesn't work because at this point the container itself is still the child!
So I find myself doing
render() {
// (intermediate node render logic, then...)
const childPage = React.Children.only(this.props.children)
return(<div> {/* intermediate node rendering, then... */}
{React.cloneElement(childPage, {...nonChildProps(this.props)})}
</div>
)
}
with
const nonChildProps = (props) => {
var {children, ...nonChildren} = props
return nonChildren
}
Which is all quite ugly - I must be doing something wrong.
How can I have intermediate containers on routes in a way that doesn't lead to this problem?
解决方案
The anti-pattern is passing all props (with a spread) down a tree.
It came from an argument of "my intermediate component doesn't know that components below it need the props that come from a container above. It doesn't even know what components are below it, and that may change." (IE pass through props).
This in turn comes from an efficiency concern about components at different levels all having containers that fetch the same basic data and put it on props. "Get the common data and put it on props as high as possible for efficiency".
I have concluded there must be a better way to handle that problem ... probably time to bring in reselect, which I only just learned about.
这篇关于如何避免“脱儿童道具"?在路线上的集装箱中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！