如何在 React 组件上设置组件默认props

IT技术 reactjs ecmascript-6
2021-03-27 16:15:54

我使用下面的代码在 React 组件上设置默认props，但它不起作用。在该render()方法中，我可以看到在浏览器控制台上打印了输出“undefined props”。如何为组件 props 定义默认值？

export default class AddAddressComponent extends Component {

render() {
   let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    }
    ...
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
}

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}
6个回答

你忘了关闭Class支架。

class AddAddressComponent extends React.Component {
  render() {
    let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    } else {
      console.log('defined props')
    }

    return (
      <div>rendered</div>
    )
  }
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
};

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
};

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: React.PropTypes.array.isRequired,
  provinceList: React.PropTypes.array.isRequired,
}

ReactDOM.render(
  <AddAddressComponent />,
  document.getElementById('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />

对于那些使用 babel stage-2或transform-class-properties 之类的东西：

import React, { PropTypes, Component } from 'react';

export default class ExampleComponent extends Component {
   static contextTypes = {
      // some context types
   };

   static propTypes = {
      prop1: PropTypes.object
   };

   static defaultProps = {
      prop1: { foobar: 'foobar' }
   };

   ...

}

更新

从 React v15.5 开始，PropTypes已移出主 React 包（链接）：

import PropTypes from 'prop-types';

编辑

正如@johndodo 所指出的，static类属性实际上不是 ES7 规范的一部分，而是目前仅受 babel 支持。更新以反映这一点。

我不认为它在 React 文档中是明确的，但是如果你理解什么是static类变量是有道理的，所以我建议在 MDN 上阅读它们。基本上，文档中的语法与此等效，因为两者都将有关道具的信息添加到类本身，而不是单个实例。
2021-05-23 16:15:54
@treyhakanson MDN 链接只讨论静态方法，不讨论变量。除了Babel之外，我找不到静态类变量的引用。这是公认的 ES7 属性吗？
2021-06-05 16:15:54
感谢您的回答，但我想了解更多关于它的信息，所以查看了react/ nativedoc 并找不到它们，该文档在哪里？
2021-06-08 16:15:54
导入更改为：从 'prop-types' 导入 PropTypes；
2021-06-18 16:15:54

首先，您需要将您的类与其他扩展分开，例如您无法AddAddressComponent.defaultProps在内部扩展，class而是将其移到外部。

我还将建议您阅读有关 构造函数和 React 生命周期的信息：请参阅组件规范和生命周期

这是你想要的：

import PropTypes from 'prop-types';

class AddAddressComponent extends React.Component {
  render() {
    let { provinceList, cityList } = this.props;
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props');
    }
  }
}

AddAddressComponent.contextTypes = {
  router: PropTypes.object.isRequired
};

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
};

AddAddressComponent.propTypes = {
  userInfo: PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}

export default AddAddressComponent;
@ivarni 不一定，但重要的是他了解生命周期、构造函数和类扩展。所以他会知道他在做什么。所以我添加了一些外部链接
2021-05-27 16:15:54
很公平，我只是认为说“你需要”并不完全正确。我宁愿说“你可以添加这些方法来观察生命周期”。否则，很好的答案:)
2021-06-15 16:15:54
你确定他们需要constructor和componentWillReceiveProps？在我看来，OP 只是忘记了他们的类声明的结束括号。
2021-06-17 16:15:54

您还可以使用解构赋值。

class AddAddressComponent extends React.Component {
  render() {

    const {
      province="insertDefaultValueHere1",
      city="insertDefaultValueHere2"
    } = this.props

    return (
      <div>{province}</div>
      <div>{city}</div>
    )
  }
}

我喜欢这种方法，因为您不需要编写太多代码。

我在这里看到的问题是您可能希望在多种方法中使用默认道具。
2021-06-15 16:15:54

如果您使用的是功能组件，则可以在解构赋值中定义默认值，如下所示：

export default ({ children, id="menu", side="left", image={menu} }) => {
  ...
};
其它你可能感兴趣的问题
上一篇在 React.js Web 应用程序中将数据发送到数据库 下一篇如何使用 JSX 和 Loadsh 重复元素 n 次