如何在 object 中導出 react jsx 組件？

Question

對於干凈的代碼和文件夾結構，我將一些數據（在本例中為模態數據）移動到單獨的文件中。 但是，我無法將組件放入 object 值中。 這是我想要做的：

export function invalidId(id) {
   return {
      info: {
         title: "Invalid ID!",
         message: (
            <>
               The 
               <code className="inline-code">{id}</code>
               is invalid. Please make sure blah blah blah...
            </>
         ),
      },


      // I need help with this part
      buttons: {
         <>
            <Button label="Retry" />
            <Button label="More Info" >
         </>   
      }
   }
}

import { invalidId } form "modaldata";

setModalInfo(invalidId(id).info);
setModalButtons(invalidId(id).buttons);

我在這里使用return因為id是動態的。 主要問題是buttons部分。 將 JSX 放入 object 的正確方法是什么？

Answer 1

請記住，JSX 表達式會生成 object 值（它會轉換為對React.createObject(/*...*/)的調用或任何其他設置為 JSX 函數的內容）。 與任何其他值一樣，如果您想將該值放入 object 中，您需要：

1. 直接使用片段（不在另一個對象內）； 或者

2. 使用屬性名稱（或名稱）； 或者

3. 使用數組

（或將buttons設為返回片段的 function，如abhi patil 所示。）

這是＃1（注意沒有{} ）：

buttons: <>
   retry: <Button label="Retry" />
   moreInfo: <Button label="More Info" >
</>

這是＃2，假設您想要兩個按鈕的單獨屬性名稱：

buttons: {
   retry: <Button label="Retry" />,
   moreInfo: <Button label="More Info" >,
}

這是＃3，一個包含兩個按鈕的數組（而不是普通對象）：

buttons: [
   <Button label="Retry" />,
   <Button label="More Info" >,
]

Answer 2

您需要在 object 字段中返回 jsx 模板，並像 function 一樣調用它。

export function invalidId(id) {
   return {
      info: {
         title: "Invalid ID!",
         message: ()=> (
            <>
               The 
               <code className="inline-code">{id}</code>
               is invalid. Please make sure blah blah blah...
            </>
         ),
      },


      // I need help with this part
      buttons:()=> (
         <>
            <Button label="Retry" />
            <Button label="More Info" >
         </>   
      )
   }
}

setModalButtons(invalidId(id).buttons();