Para un código limpio y una estructura de carpetas, muevo algunos datos (en este caso, datos modales) a un archivo separado. Sin embargo, no puedo poner un componente dentro de un valor de objeto. Esto es lo que quiero hacer:
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); Usé return aquí porque la id es dinámica. El principal problema es la parte de los buttons . ¿Cuál es la forma correcta de poner JSX dentro de un objeto?
Recuerde que una expresión JSX da como resultado un valor de objeto (se convierte en una llamada a React.createObject(/*...*/) o cualquier otra cosa que esté configurada como la función JSX). Como cualquier otro valor, si desea colocar ese valor dentro de un objeto, debe:
Simplemente use el fragmento directamente (no dentro de otro objeto); o
Use un nombre de propiedad (o nombres); o
Usa una matriz
(O haga de los buttons una función que devuelva el fragmento, como muestra abhi patil ).
Aquí está el n. ° 1 (nota n. ° {} ):
buttons: <> retry: <Button label="Retry" /> moreInfo: <Button label="More Info" > </>Aquí está el n.° 2, suponiendo que desee nombres de propiedades separados para los dos botones:
buttons: { retry: <Button label="Retry" />, moreInfo: <Button label="More Info" >, }Aquí está el n. ° 3, una matriz (en lugar de un objeto simple) que contiene los dos botones:
buttons: [ <Button label="Retry" />, <Button label="More Info" >, ]Debe devolver la plantilla jsx en un campo de objeto y llamarla como una función.
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();