Estamos creando una biblioteca base para el panel de administración (algo similar a react-admin ).

Sin embargo, en el mundo de reacción, los objetos pueden ser de muchos tipos. No hay una coherencia única.

Supongamos que tiene un componente llamado Action y el usuario de su biblioteca debería proporcionarle una lista.

Estas son las posibles cosas que podría obtener:

 // a single item, as a JSX variable const Actions = <Action /> // an array of items, as a JSX variable const Actions = <> <Action /> <Action /> </> // an arrow function, but returning a single JSX result const Actions = (params) => <Action /> // an arrow function, but returning an array of JSX results const Actions = (params) => <> <Action /> <Action /> </> // an arrow function, having body, returning a single JSX result const Actions = (params) => { return <Action /> } // an arrow function, having body, returning an array of JSX results const Actions = (params) => { return <> <Action /> <Action /> </> } // or they might give lowercase variables, etc.

Y puede haber otras formas posibles que no conozco.

Esto hace que escribir código sea muy frustrante y difícil. Debido a que para la variable JSX simple, debe usar la sintaxis de interpolación ( {actions} ), para los componentes de la función, debe representar usando <Actions /> , etc.

¿Hay alguna función en reaccionar que podamos usar para envolver todos estos tipos en un fragmento vacío y unificarlos?