我想有选择地将一些道具传递给每个子元素并设置它们的样式。
const Burger = ({children, ...rest}) => (
<>
<p>I'm a burger...</p>
{children}
</>
)
const Meat = ({type}) => <span>with {type?type:'no'} meat</span>
const Sauce = ({flavor}) => <span>with {flavor?flavor:'no'} sauce</span>
const Veggie = ({green}) => <span>with {green?green:'no'} greens</span>
const App = () => (
// reach-router nesting
<Router>
<Burger path='burger' {...props}>
<Sauce path='sauce' />
<Veggie path='veggie' />
<Meat path='meat' />
</Burger>
</Router>
)
我注意到我不能简单地遍历并将道具传递给每个孩子
const Burger = ({children, ...rest}) => (
<p>I'm a burger... </p>
{children.map(Child => <Child {...rest} />) } // error
)
使用渲染函数在内部不起作用<router>
。它打破了嵌套路由,如果孩子的数量不确定,我不喜欢为每个孩子手动输入道具。
...
<Router>
<Burger path='burger' {...props}>
{someStyle => (
<>
<Sauce path='sauce' style={someStyle}/>
<Veggie path='veggie' style={someStyle}/>
<Meat path='meat' style={someStyle}/>
</>
)}
</Burger>
</Router>
...
接下来,我继续尝试使用 css-in-js 解决方案(情感)来选择和设置每个直接后代的样式,<Burger/>
但这在这种情况下似乎也不起作用。
const styleAllChild = css`
& > * : {
margin-bottom: 10px;
}
`
...
<Router>
<Burger path='burger' css={styleAllChild} {...props}>
<Sauce path='sauce' />
<Veggie path='veggie' />
<Meat path='meat' />
</Burger>
</Router>
...
最后,我发现将 children.map 与 React.cloneElement 结合使用的解决方案并不令人满意,因为如果每个孩子太大或太嵌套,应该会有一些性能影响。
还有另一种方法来实现我想要的吗?谢谢你。