React.js：将默认值设置为道具

Question

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

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

我有另一个呈现 2 个按钮的组件：

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

但我收到以下错误：

类型错误：无法定义属性“消息”：对象不可扩展

在上面写着：

         this.props.message="Hello"

在方法 setMessage AppButton 类中。

编辑 1

我使用 npm 和我生成了反应应用程序 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"
  }
}

原文由 Dimitrios Desyllas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我相信 defaultProps 应该做你需要的：

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

从文档：

defaultProps 将用于确保 this.props.name 在父组件未指定的情况下具有值。 propTypes 类型检查发生在 defaultProps 解析之后，因此类型检查也将应用于 defaultProps。

为清楚起见进行编辑：在这种情况下，您不需要 setMessage 。

原文由 Jesse Kernaghan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

这将检查 prop 的值，如果它是 undefined 或 null，则默认消息将替换 prop。

原文由 netoguimaraes 发布，翻译遵循 CC BY-SA 3.0 许可协议