如何在另一个自定义组件中使用自定义组件 Props 的 Prop 语法？答案

【问题标题】：Prop syntax for how to use custom component Props, inside another custom component?如何在另一个自定义组件中使用自定义组件 Props 的 Prop 语法？
【发布时间】：2022-12-04 11:23:28
【问题描述】：

Hopefully, I can explain this correctly.

I have a custom Button component in a React app and this component has props like disabled, size etc. This custom Button component is then imported to a Modal component.

Sometimes, while inside the Modal component, I want to access the props that exist inside the Button component to modify each Modal. For example in one Modal, I might want a button to be disabled but in other modals, I don\'t.

So I create a prop inside Modal called buttonAddionalProps and make it hold the value of ButtonProps (this is written in a types/props file in typescript).

Now, back to the Modal, I want to pass the prop buttonAdditionalProps to my Modal but I am not sure what the syntax would be.

Example:

<Modal
   id=\"123\"
   primaryAction={handleClose}
   buttonAddionalProp= \" What would this be? \"
></Modal>

Everything I have tried doesn\'t work and all my google searches aren\'t leading me down the right path.

// 2 examples of things I tried to help show what I am trying to do

buttonAddionalProp = {Button={disabled = {true}}  -- fail 
buttonAddionalProp = {Button={disabled}}          -- fail

Could you give the JSX code of the calling of your Button from your Modal please ?

标签： javascript reactjs components react-component

【解决方案1】：