如何在另一個自定義組件中使用自定義組件 Props 的 Prop 語法？

Question

希望我能正確解釋這一點。

我在 React 應用程序中有一個自定義 Button 組件，該組件具有disabled 、 size等道具。然后將此自定義 Button 組件imported到 Modal 組件。

有時，在 Modal 組件中，我想訪問 Button 組件中存在的屬性來修改每個 Modal。 例如，在一個模式中，我可能希望禁用一個按鈕，但在其他模式中，我不需要。

因此，我在 Modal 中創建了一個名為buttonAddionalProps的道具，並使其保存ButtonProps的值（這是用打字稿寫在類型/道具文件中的）。

現在，回到模態，我想將道具buttonAdditionalProps傳遞給我的模態，但我不確定語法是什么。

例子：

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

我嘗試過的一切都不起作用，我所有的谷歌搜索都沒有引導我走上正確的道路。

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

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

Answer 1

要將道具從 Modal 組件傳遞到 Button 組件，您可以在 JSX 中使用展開運算符 (...)。 這會將額外的道具傳播到您的 Button 組件，允許您根據需要訪問和修改它們。

<Modal
  id="123"
  primaryAction={handleClose}
  buttonAdditionalProps={{ ...ButtonProps, disabled: true }}
></Modal>

或者，您可以將按鈕作為子按鈕傳遞並直接修改：

<Modal
  id="123"
  primaryAction={handleClose}>
 <Button disabled />
</Modal>

然后可以使用children道具在模態組件中呈現。