Estoy tratando de representar algunos elementos secundarios usando un componente de botón reutilizable (componente de clase). El componente de botón acepta algunos accesorios y también representa un enlace de forma condicional.
A continuación se muestra el código:
render() { const { className, link, children, style, onClick, id, value, tabIndex, name } = this.props; if (link) { return ( <Link className={className} onClick={onClick} to={link}> {children} </Link> ); } return ( <button value={value} style={style} className={''} onClick={onClick} id={id} tabIndex={tabIndex} name={name} > {children} </button> ); } } export default Button;Pero React sigue devolviendo un error que dice:
```Uncaught Error: Objects are not valid as a React child (found: object with keys {__typename, symbol}). If you meant to render a collection of children, use an array instead.```Tanto el componente de botón como el de enlace muestran los elementos secundarios que contienen.
Estás pasando un objeto, React no puede representarlo porque es un objeto complejo, básicamente no sabe qué hacer con ese objeto. Puede pasar una matriz, una cadena, un número entero u otros tipos primitivos .
He hecho un ejemplo aquí .
Quite el comentario de la línea que pasa el object al componente Test y verá un error similar.
debe usar su componente de esta manera: (suponiendo que se llame botón de clase ...)
<Button>Hello there!</Button>Donde "¡Hola!" es el apoyo de los niños.