如何导出对象中的react 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 表达式会生成一个对象值（它会转换为对 JSX 函数的调用React.createObject(/*...*/)或设置为 JSX 函数的任何其他内容）。与任何其他值一样，如果您想将该值放入对象中，您需要：

1. 直接使用片段（不在另一个对象中）；或者

2. 使用属性名称（或多个名称）；或者

3. 使用数组

（或者创建buttons一个返回片段的函数，如abhi patil 所示。）

这是#1（注意 no {}）：

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" >,
]