React.js : Définir une valeur par défaut dans une propriété

Question

J'ai créé ce composant qui crée un simple bouton :

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>
    )
  }
}

Et j'ai un autre composant qui rend 2 boutons :

class App extends Component {
  render() {
    return (
          <AppButton onClick={function(){ alert('Test Alert') } } message="My Button" />
          <AppButton />
    );
  }
}

Mais j'obtiens l'erreur suivante :

TypeError : can't define property "message" : L'objet n'est pas extensible

Sur la ligne qui dit :

        this.props.message="Hello"

dans la méthode setMessage de la AppButton classe.

Édition 1

J'ai généré l'application react en utilisant npm et moi package.json a le contenu suivant

{
  "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"
  }
}

Answer 1

Je crois que defaultProps devrait faire l'affaire :

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"); }
};

D'après les documents :

Les defaultProps seront utilisés pour garantir que this.props.name aura une valeur s'il n'a pas été spécifié par le composant parent. Le contrôle de type des propTypes a lieu après la résolution des defaultProps, de sorte que le contrôle de type s'applique également aux defaultProps.

Editer pour plus de clarté : Il n'est pas nécessaire que vous setMessage dans ce cas.

Answer 2

return (
      <button onClick={this.props.onClick}>{this.props.message || "Default text"}</button>
);

Cette fonction vérifie la valeur de prop et si elle est indéfinie ou nulle, le message par défaut remplacera la valeur de prop.

Answer 3

Utilisez-vous React v.14 ou plus ? L'objet props est maintenant gelé et ne peut pas être modifié. Vous pouvez utiliser React.cloneElement à la place.

Answer 4

Vous ne pouvez pas définir d'accessoires, vous devez utiliser l'état à la place.

Si vous devez modifier la valeur, elle doit être stockée dans l'état, car les objets sont statiques.

Vous devez procéder de la manière suivante :

this.setState({message: 'your message'});

Et dans la méthode de rendu, l'utiliser comme :

{this.state.message}

Il est recommandé d'initialiser l'état avec cette valeur dans le constructeur :

constructor(props){
  super(props);

  this.state = {
    message: ''
  }
}

Il en sera de même pour setOnClick

Vous y trouverez aquí une bonne explication à ce sujet.