反应父组件向子组件传递具有不同名称的道具

Question

Sorry for the terrible question name, I'm wondering if there is a standard way of passing a different value for the same prop from different parents and if there's something wrong with the way I am spreading my props.

Parent 1:

<ChildComponent
prop1={prop1}
prop2={prop2}
paymentProcessingDate={Date.now()}
...passThroughProps
>

Parent 2 which has a prop carServiceDate

<ChildComponent
prop1={prop1}
prop2={prop2}
paymentProcessingDate={carServiceAppointment.date}
...passThroughProps
>

Both Parent1 and Parent2 make use of ChildComponent but need to pass in a different value for paymentProcessingDate. I'm receiving an error that the spread of passThroughProps will always overwrite paymentProcessingDate but the first time paymentProcessingDate is used or defined is in the call to ChildComponent. Any help or suggestions is really appreciated!!

Answer 1

The ...passThroughProps must contain a value for paymentProcessingDate so TypeScript is complaining that your spread prop will overwrite whatever you explicitly set.

Try moving the spread to the top and see if that fixes it:

<ChildComponent
...passThroughProps
prop1={prop1}
prop2={prop2}
paymentProcessingDate={carServiceAppointment.date}
>

Or if possible, remove paymentProcessingDate from passThroughProps .