React.js: Ustaw wartość domyślną w rekwizyt

Question

Fellows Mam tego składnika, który tworzy prosty przycisk:

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

I mam innego składnika, który renderuje 2 przyciski:

class App extends Component { 
    render() { 
    return (
      <AppButton onClick={function(){ alert('Fuck You') } } message="Fucked up Button" /> 
      <AppButton /> 
    ); 
    } 
} 

Ale pojawia się następujący błąd:

TypeError: can't define property "message": Object is not extensible

w wierszu, który mówi:

 this.props.message="Hello" 

w metodzie setMessage z klasy .

Edycja 1

I generowane aplikację reagować korzystając npm i ja package.json ma następującą treść

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

wierzę, że defaultProps powinien zrobić to, czego potrzebujesz:

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

Od docs:

The defaultProps will be used to ensure that this.props.name will have a value if it was not specified by the parent component. The propTypes typechecking happens after defaultProps are resolved, so typechecking will also apply to the defaultProps.

Edycja dla jasności: Nie ma potrzeby dla ciebie setMessage w tej instancji.

Answer 2

Używasz React V.14 lub powyżej? obiekt rekwizytów jest teraz zamrożony i nie można go zmienić. Możesz użyć React.cloneElement zamiast

Answer 3

Nie możesz ustawić rekwizytów, musisz zamiast tego użyć stanu.

Jeśli chcesz zmienić wartość, to powinna być przechowywana w stanie, ponieważ rekwizyty są statyczne.

Należy zrobić to w ten sposób:

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

A w sposób uczynić go używać jako:

{this.state.message} 

Jako rekomendacji, należy również zainicjować stan z tej wartości w konstruktor:

constructor(props){ 
    super(props); 

    this.state = { 
    message: '' 
    } 
} 

To samo wydarzyło się setOnClick

Znajdziesz here dobre wyjaśnienie na ten temat.

Answer 4

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

Spowoduje to sprawdzenie wartości podpory, a jeśli jest ona niezdefiniowana lub zerowa, domyślny komunikat zastąpi podpórkę.