使用解构时传递带有传播运算符的道具

Question

我有一个子组件C，我想通过子组件B，使用扩展运算符将所有 props 一起传递到父组件A。在使用解构技术时，我如何实现这一目标？

const C = ({onClick}) => (
<El onClick={onClick} />
)
// What do I need to pass through here?
// I tried ({someProps, ...props}) or ({someProps}, props) and multiple other variants but none worked
const B = ({someProps}) => (
<>
<OtherComponent someProps={someProps} />
<C {...props} />
</>
)
const A = () => {
const handleOnClick = () => {
setSomeState(!someState)
}
return (
<>
<B onClick={handleOnClick} />
</>
)
}

Answer 1

好的，如果其他人遇到同样的问题，请将其保留在这里。

它实际上只是在中间组件中使用({someProps, ...props})。我发誓我已经尝试过多次，但在这里询问后才有效。

Answer 2

尝试以下操作：

const B = ({ someProps, ...rest }) => (
<>
<OtherComponent someProps={someProps} />
<C {...{ ...rest, someProps }} />
</>
);