Estoy trabajando en una pequeña aplicación React. Tiene una lista de botones en un componente Buttons.js .
Siguiendo esta guía , estoy tratando de pasar el valor del atributo de la etiqueta a la plantilla de un solo botón de esta manera:
import './Buttons.css'; import Button from './Button'; const Buttons = (props) => { return ( <ol class="buttons-container"> <Button label="Clik 1" /> <Button label="Clik 2" /> <Button label="Clik 3" /> </ol> ); }; export default Buttons; import './Button.css'; const Button = () => { return ( <li>{ this.props.label }</li> ); } export default Button;El código anterior no muestra ningún error en la consola, pero arroja esto en la consola del navegador:
Cannot read properties of undefined (reading 'props')El código correcto es
import './Button.css'; const Button = (props) => { return ( <li>{ props.label }</li> ); } export default Button; Olvidaste pasar props y estabas usando this.props.label .
Estás confundiendo componentes de clase y componentes de función.
En un componente de función, como el que usted tiene, los accesorios se pasan como el primer argumento de la función.
const Button = (props) => { return ( <li>{props.label}</li> ); }Y comúnmente desestructurado:
const Button = ({label}) => { return ( <li>{label}</li> ); } Accedería a accesorios a través de this si estuviera escribiendo un componente de clase:
class Button extends React.Component { render() { return ( <li>{this.props.label}</li> ); } }Primero, su componente Button es un componente funcional, por this que no es necesario. En segundo lugar, debe definir accesorios en su componente de botón;
const Button = (props) => { return ( <li>{ props.label }</li> ); } export default Button;