【问题标题】：React.js: Set a Default value into a propReact.js：将默认值设置为道具
【发布时间】：2017-11-09 05:17:03
【问题描述】：

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

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

但我收到以下错误：

TypeError：无法定义属性“消息”：对象不可扩展

上面写着：

        this.props.message="Hello"

在 AppButton 类的方法 setMessage 中。

编辑 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"
  }
}

【问题讨论】：

旁注 - 我非常喜欢你的提醒和信息。这确实表明您一直在努力使这项工作以您想要的方式工作。我知道那些感觉很好。
我只是为了好玩才放它们。一点汗都没有！
这样有效吗？两个根节点？

标签： javascript reactjs ecmascript-6

【解决方案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。

【讨论】：

有时我用 ES6 解构 { names=[] } 分配默认值
@Pedrammarandi 是的，如果您要创建功能性组件而不需要生命周期挂钩，这也是一个好方法。

【解决方案2】：

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

这将检查 prop 的值，如果它未定义或为 null，则默认消息将替换该 prop。

【讨论】：

【解决方案3】：

您使用的是 React v.14 或更高版本吗？道具对象现在被冻结并且无法更改。你可以改用 React.cloneElement

【讨论】：

我认为 v.14 及更高版本的完整示例会更有益

【解决方案4】：

你不能设置 props，你必须使用 state 来代替。

如果你需要改变值，那么它应该保存在 state 中，因为 props 是静态的。

你应该这样做：

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

并在渲染方法中将其用作：

{this.state.message}

作为建议，您还应该在构造函数中使用该值初始化状态：

constructor(props){
  super(props);

  this.state = {
    message: ''
  }
}

setOnClick也会发生同样的情况

您会发现here 对此进行了很好的解释。

【讨论】：

【解决方案5】：

对于默认道具，您可以这样做

 const { 
     message = '', 
     onClick = (e)=>{} 
 } = props;

并在没有 props 关键字的情况下使用这些变量（您仍然可以将 props 用于未定义的 props 值）

<button onClick={onClick}>{message}</button> 
{props.value}

但是对于您的错误，处理如下错误就可以了：

{props.message ?? ''}

【讨论】：