Parece que este concepto es tan básico que falta documentación al respecto. Puedo pasar objetos como accesorios, pero parece que no puedo pasar un literal de cadena básico.
Tengo un componente funcional que toma un accesorio escrito, así:
const ChildComponent = (name: string) => { return ( <div className={styles.childComponent}> <p className={styles.styledName}> { name } </p> </div> ); }y llámalo así:
<ChildComponent name="testName" /> VSCode arroja el error en ChildComponent :
Escriba '{ nombre: cadena; }' no es asignable para escribir 'cadena'
Soy muy nuevo en Typescript, pero por lo que puedo decir, está leyendo el literal de cadena como un objeto.
Gran parte de lo que he leído aconseja crear un accesorio personalizado, incluso para una sola propiedad , así:
Type: NameProp { name: string } y usándolo como el tipo de prop, en lugar de string .
¿No es esto exagerado? O me estoy perdiendo algo muy básico.
Tienes que desestructurarlo desde el objeto props .
propses un objeto.
const ChildComponent = (props: ChildComponentProps) => { const { name } = props; // CHANGE THAT YOU HAVE TO DO return ( <div className={styles.childComponent}> <p className={styles.styledName}>{name}</p> </div> ); };o
const ChildComponent = ({ name }: ChildComponentProps) => { return ( <div className={styles.childComponent}> <p className={styles.styledName}>{name}</p> </div> ); }; donde está ChildComponentProps
interface ChildComponentProps { name: string; }const ChildComponent = ({ name }: { name: string }) => { return ( <div className={styles.childComponent}> <p className={styles.styledName}>{name}</p> </div> ); };Defina una interfaz de accesorios para definir el parámetro de accesorios como objeto:
interface Props{ name:string } const ChildComponent: React.FC<Props> = ({name}) => { return ( <div className={styles.childComponent}> <p className={styles.styledName}> { name } </p> </div> ); }