如何向已经通过传播运算符接收道具的子组件添加道具？

Question

我不确定这是 TypeScript 问题，还是 React 道具行为问题，或者只是我搞砸了 ES6 解构。

我有一个 ParentComponent，其属性类型为 ParentProps，还有一个 ChildComponent，其类型也相同。 ChildComponent 使用相同的道具，除了我现在需要重新定义的一个道具（或者如果不可能，添加一个新道具）。

对于这个例子，假设 ParentProps 只是 buttonName: string 和 doSomething: (text: string) => void

我想我可以通过展开一个对象来添加对象解构，然后添加属性: 逗号后的值，即：{...props, additionalProp: doSomething} 但这似乎不起作用：Left side of comma operator is unused and has no side effects. 任何人都可以插话我的问题是什么以及我做错了什么吗？

const ParentComponent: FC<ParentProps> = memo(function ParentComponent({
  ...props
}) {
  function doSomething(text) {
    console.log("did the thing", text)
  }

  return <ChildComponent {...props, doSomething: doSomething} />   // <----here's the problem
})

export function ChildComponent(props: ParentProps) {
  return (
    <button onClick={props.doSomething(props.buttonName)}>{props.buttonName}</button>
  )
}

Answer 1

...or if it's simply me messing up ES6 destructuring.

   return <ChildComponent {...props} doSomething={doSomething} /> //  do this

你必须解构一个对象（或数组）。您将 JSX-属性括号与用于声明对象的括号混淆了。

上面的示例也将覆盖可能存在的属性 props.doSomething。 React-props 将覆盖之前定义的道具。但是，如果您明确表示此更改而不是隐式覆盖它会更好。

如何向已经通过传播运算符接收道具的子组件添加道具？

How to add a prop to a child component already receiving props via the spread operator?

javascript

ecmascript-6

reactjs

react-component

react-functional-component