Me gustaría crear una barra de acción personalizada con acciones flexibles que se puedan configurar a través de accesorios o similares.
Así es como lo implementé (y funciona como se esperaba), pero me pregunto si hay una forma mejor o más limpia en React (con TypeScript).
Especialmente cuando las acciones aumentan con el tiempo. Entonces tendría que agregar más valores booleanos que eventualmente harían las cosas confusas.
type CustomBarProps = { withButton: boolean, withCheckbox: boolean, withRadio: boolean, } export const CustomBar = ({ withButton = false, withCheckbox = false, withRadio = false, }: CustomBarProps) => { const features: JSX.Element[] = [ withButton && <Button />, withCheckbox && <Checkbox />, withRadio && <Radio />, ] return <Bar features={features} /> }sí, no es necesario que defina explícitamente que cada apoyo tiene que ser falso, también puede hacerlo así
type CustomBarProps = { Button?: boolean; Checkbox?: boolean; Radio?: boolean; }; export const CustomBar: React.FC<CustomBarProps> = ({ Button, Checkbox, Radio }) => { const features = [Button && <Button />, Checkbox && <Checkbox />, Radio && <Radio />]; return <Bar features={features} />; };