Me gustaría renderizar un componente basado en un accesorio.
const Item = ({ property }) => { return property ? <h1>...</h1> : <h6>...</h6> }En mi código hay elementos principales y elementos secundarios para el elemento. Así que me preguntaba si algo como esto es posible:
const Item = ({ property }) => { element = property ? <h1> : <h6> return <element>...</element> }Sé que puedo envolver el componente principal + secundario, pero estoy buscando una solución más legible y fácil de mantener.
Aquí está mi componente:
import { IconProp } from "@fortawesome/fontawesome-svg-core" import { faFolder } from "@fortawesome/free-solid-svg-icons" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { Link } from "react-router-dom" type ListItemProps = { /** Set to true if element should have background */ background?: boolean /** Set to true if element should be indented */ indent?: boolean /** Title of an List Element is at the left side */ title: string /** Icon at the beginning of the Element */ icon?: IconProp /** Content on the left side next to title */ header?: React.ReactChild /** Link to when click element */ to?: string /** Function what happens when you click element */ onClick?: (values: any) => void } /** * List, should have List as parent */ export const ListItem: React.FC<ListItemProps> = ({ title, icon = faFolder, indent, background, header, children, to, onClick }) => { // Elements on the left side of the item const headerContent = <> <FontAwesomeIcon icon={icon} className="text-lightgrey mr-4" /> <h4 className="text-lg text-headline-black font-semibold mr-4">{title}</h4> {header} </> const headerClasses = `flex items-center py-4 pl-7 ${indent ? "pl-16" : ""} flex-grow` return <div className={`flex rounded-lg w-full cursor-pointer ${background ? "bg-white-lightgrey hover:bg-gray-200" : "hover:bg-white-lightgrey"}`}> {to ? <Link to={to} className={headerClasses}> {headerContent} </Link> : <button onClick={onClick} className={headerClasses}> {headerContent} </button> } {children && <div className="flex items-center mx-4"> {children} </div>} </div> }Hay 2 opciones para hacer esto:
Nota: el nombre de la variable para el componente (en este ejemplo Component ) debe estar en mayúsculas o se debe acceder con notación de puntos. <Component /> o <someObject.component /> funcionarán, pero <component /> no.
function Item({prop}) { const Component = prop ? 'h1' : 'h6' return <Component> <div>It works!</div> </Component> }Esta solución también funciona para componentes de reacción personalizados en lugar de etiquetas HTML. Eso se parece a esto
function FuncComponent() {} function OtherComponent() {} function Item({prop}) { const Component = prop ? FuncComponent : OtherComponent return <Component> <div>It works!</div> </Component> }return , y luego proporcionarlos como niños al elemento que desea function Item({prop}) { const children = <div>It works!</div> return {prop ? <h1>{children}</h1> : <h6>{children}</h6>} }Todos estos funcionarán, solo depende de usted cuál prefiere.