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

Posted 2023-02-22

【中文标题】React.js：将默认值设置为道具

【英文标题】：React.js: Set a Default value into a prop

【发布时间】：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"
  

【问题讨论】：

旁注 - 我非常喜欢你的提醒和信息。这确实表明您一直在努力使这项工作以您想要的方式工作。我知道那些感觉很好。

我只是为了好玩才放它们。一点汗都没有！

这样有效吗？两个根节点？

【参考方案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 ?? ''