如何导出对象中的jsx组件？

Question

对于干净的代码和文件夹结构，我正在将一些数据(在本例中是模态数据)移动到一个单独的文件中。但是，我无法将组件放入对象值中。我想做的是：

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的正确方法是什么？

Answer 1

请记住，JSX表达式会产生一个对象值(它被转换为对React.createObject(/*...*/)的调用，或者设置为JSX函数的其他任何东西)。与任何其他值一样，如果要将该值放入对象中，则需要：

1. 只直接使用片段(而不是在另一个对象中)；或

1. 使用属性名称(或多个名称)；或

1. 使用数组

(或使buttons成为返回片段的函数，如abhi patil shows)。

下面是#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

您需要在对象字段中返回jsx模板，并像函数一样调用它。

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();