React.js：将默认值设置为 prop

IT技术 javascript reactjs ecmascript-6

2021-05-16 08:17:12

我已经制作了这个组件来创建一个简单的按钮：

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

我使用生成的react应用程序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"
  }
}

4个回答

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

从文档：

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

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

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

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

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

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

如果您需要更改值，那么由于 props 是静态的，它应该存储在 state 中。

你应该这样做：

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

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

{this.state.message}

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

constructor(props){
  super(props);

  this.state = {
    message: ''
  }
}

同样会发生在 setOnClick

你会在这里找到一个很好的解释。

其它你可能感兴趣的问题

上一篇设置 Marlin 打印机时出现奇怪的步进器问题下一篇烘烤旧PLA线轴