Compañeros, he creado este componente que crea un botón simple:
class AppButton extends Component { setOnClick() { if(!this.props.onClick && typeof this.props.onClick == 'function') { this.props.onClick=function(){ alert("Hello"); } } } setMessage() { if(!this.props.message){ this.props.message="Hello" } } render(){ this.setOnClick() this.setMessage() return ( <button onClick={this.props.onClick}>{this.props.message}</button> ) } }Y tengo otro componente que genera 2 botones:
class App extends Component { render() { return ( <AppButton onClick={function(){ alert('Test Alert') } } message="My Button" /> <AppButton /> ); } }Pero me sale el siguiente error:
TypeError: no se puede definir la propiedad "mensaje": el objeto no es extensible
En la línea que dice:
this.props.message="Hello" en el método setMessage de la clase AppButton .
Generé la aplicación de reacción usando npm y yo package.json tiene el siguiente contenido
{ "name": "sample", "version": "0.1.0", "private": true, "dependencies": { "react": "^15.5.4", "react-dom": "^15.5.4" }, "devDependencies": { "react-scripts": "1.0.7" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }Creo que defaultProps debería hacer lo que necesita:
import PropTypes from 'prop-types'; class AppButton extends Component { render(){ return ( <button onClick={this.props.onClick}>{this.props.message}</button> ) } }; AppButton.propTypes = { message: PropTypes.string, onClick: PropTypes.func }; AppButton.defaultProps = { message: 'Hello', onClick: function(){ alert("Hello"); } };De los documentos:
Se utilizarán defaultProps para garantizar que this.props.name tendrá un valor si no lo especificó el componente principal. La verificación de tipos de propTypes ocurre después de que se resuelven los valores predeterminados, por lo que la verificación de tipos también se aplicará a los valores predeterminados.
Edite para mayor claridad : no debería ser necesario que setMessage en este caso.
return ( <button onClick={this.props.onClick}>{this.props.message || "Default text"}</button> );Esto verificará el valor de prop y, si no está definido o es nulo, el mensaje predeterminado reemplazará a prop.
¿Está utilizando React v.14 o superior? el objeto de accesorios ahora está congelado y no se puede cambiar. Puedes usar React.cloneElement en su lugar