为每个嵌套的子项分配样式和道具

Question

我想有选择地将一些道具传递给每个子元素并为每个元素设置样式。

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结合使用的解决方案并不令人满意，因为如果每个子级太大或太嵌套，应该会对性能产生一些影响。

有没有另一种方法来实现我想要的？谢谢。

Answer 1

您的第一个解决方案应该有效。您只需要在 return 语句中使用一个组件。所以我添加了<>(片段的简写(。你应该使用双大括号进行解构(第一个用于在 jsx 中使用 js 代码，第二个用于对象解构语法(。

const Burger = ({children, ...rest}) => (
<>
<p>I'm a burger... </p>
{children.map(Child => <Child {{...rest}} />) } // error
</>
)

Answer 2

我用彼得的答案解决了它，但用React.Children代替

const Parent = ({children, myProps}) => (
<>
...
{React.Children.map(children || null, (child, index) => {
return (
<child 
{...child.props}
key={index}
myProps={myProps}
style={someStyle} 
/>
);
})}
...
<>