React.js: 在prop中设置默认值

11 浏览
0 Comments

React.js: 在prop中设置默认值

伙计们，我创建了一个简单的按钮组件：

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

我还有另一个组件，渲染了两个按钮：

class App extends Component {
  render() {
    return (
      

        
        
      

    );
  }
}

但是我遇到了以下错误：

TypeError: 无法定义属性"message"：对象不可扩展

错误出现在`AppButton`类的`setMessage`方法中的以下代码行：

this.props.message = "Hello";

编辑1：

我使用`npm`生成了React应用程序，我的`package.json`文件的内容如下：

{

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

}

}

0