Tengo un componente SampleComponent.tsx :
import React from 'react'; type Props = { text: string }; export const SampleComponent: React.FC<Props> = ({text})=><div>{text}</div>; SampleComponent.variant1 = ({text})=><div>{'variant1' + text}</div>; Cuando trato de usar SampleComponent.variant1 en otros componentes, aparece un error mecanografiado:
Property 'variant1' does not exist on type ... En este momento solo estoy emitiendo tipo con as , pero creo que hay una mejor manera.
¿Cómo puedo arreglar esto?
Editar: cómo escribir si tengo variantes dinámicas, de 1 a 4 de este tipo, .variant1 , .variant2 , .variant3 y .variant4
Como ha dicho que el componente de muestra es un FC, reaccionar no le permitirá agregar ninguna propiedad que no sea parte de FC. Puede expandir el tipo que declara como SampleComponent, algo como esto:
export const SampleComponent: React.FC<Props> & { variant1: React.FC; } = ({ text }) => <div>{text}</div>; SampleComponent.variant1 = ({ text }) => <div>{"variant1" + text}</div>;O puede proporcionar el tipo para los accesorios, pero luego dejar que TypeScript descubra el resto por la forma en que lo usa:
const SampleComponent = ({ text }: Props) => <div>{text}</div>; SampleComponent.variant1 = ({ text }: Props) => <div>{"variant1" + text}</div>;