Tengo un componente que representa el objeto "react-icons". Sin embargo, si no se proporciona ningún icono, quiero mostrar la cadena "NoIcon" en la interfaz de usuario.
El componente A es como tal.
componente A
import React from 'react'; import { FaHeart} from "react-icons/fa"; const Icon = ({FaIcon = "NoIcon"}) => { return ( <div> <FaIcon/> </div> ); }; export default Icon;y llamar a este componente desde otro componente B funciona:
componente B
import React from 'react'; import Icon from './components/icons/icon'; import { FaHeartBroken } from "react-icons/fa"; class App extends React.Component { render(){ return( <Icon FaIcon={ FaHeartBroken }/> ) } } export default App;esto devuelve un "Ícono de corazón roto", es decir, 💔.
Pero, si no se proporciona ningún icono en el componente B , debería devolver un texto, es decir, "NoIcon" en la interfaz de usuario.
Componente B
.... .... <Icon FaIcon/> ....sin embargo, esto genera un error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: boolean. Check the render method of `Icon`. También traté de establecer un método or en el componente A para la asignación de valores, que tampoco funcionó. ¿Por qué no proporcionar ningún argumento dentro del componente Icon , solicitando una verificación booleana?
componente A
const Icon = ({FaIcon = FaHeart || "NoIcon"}) => { ....componente B
... <Icon/> <Icon FaIcon = "Test"/> <Icon FaIcon = {"Test"}/>¿Cómo resolvemos esto?
Una propiedad sin un valor <Foo bar /> es en realidad una abreviatura de <Foo bar={true} /> .
Así que esto:
<Icon FaIcon/>No es correcto. Y si vuelves a leer ese error, probablemente tenga más sentido ahora:
Error: el tipo de elemento no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: booleano.
Esto significa que esperaba una cadena/clase/función, pero obtuvo un valor booleano en su lugar. En este caso true del valor abreviado prop.
Esto significa que si omites ese accesorio, obtienes el valor predeterminado.
<Icon />En segundo lugar, esto no funcionará:
const Icon = ({FaIcon = "NoIcon"}) => { return ( <div> <FaIcon/> </div> ); }; Para renderizar algo personalizado como JSX , debe ser un componente. La importación desde react-icons/fa es un componente, pero la cadena "NoIcon" no lo es.
Creo que en este caso puede ser más simple tener un condicional que represente un ícono si el accesorio está presente, o una cadena si no lo está.
Algo como:
const Icon = ({FaIcon}) => { return ( <div> { FaIcon ? <FaIcon/> : "NoIcon" } </div> ); };Si desea que un accesorio maneje un componente de icono o una cadena, puede hacerlo de varias maneras. Pero si desea poder pasar un componente de icono o una cadena, haga algo como:
const Icon = ({FaIcon = "NoIcon"}) => { return ( <div> { typeof FaIcon === 'string' ? FaIcon : <FaIcon/> } </div> ); }; En este caso, si el accesorio es una cadena (lo que también se aplica al valor predeterminado de "NoIcon" ), entonces reprodúzcalo como una cadena. De lo contrario, asuma que es un componente y renderícelo.