使用解构时使用扩展运算符传递 Props

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

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

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

Answer 2

尝试以下操作：

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

使用解构时使用扩展运算符传递 Props

Passing Props with spread operator when using destructuring

reactjs

react-props