javascript - 为每个嵌套的 child 分配样式和 Prop

我想选择性地将一些道具传递给每个子元素并为每个子元素设置样式。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>...最后，我发现结合使用child.map和React.cloneElement的解决方案并不令人满意，因为如果每个子节点太大或嵌套太多，都会对性能产生影响。还有另一种方法来实现我想要的吗？谢谢。 最佳答案 您的第一个解决方案应该起作用。您只需在return语句中使用一个组件。因此，我添加了（Fragments的简写）。并且您应该使用双花括号进行解构（第一个用于在jsx中使用js代码，第二个用于对象解构语法）。const Burger = ({children, ...rest}) => ( <> <p>I'm a burger... </p> {children.map(Child => <Child {{...rest}} />) } // error </>)