React 函数组件与类组件属性默认值

一、函数组件

• 方式一：使用 defaultProps 设置默认值

  import React from "react";
  import PropTypes from 'prop-types';
  
  function Sub (props) {
    return (
      <>
        <div>子组件</div>
        { props.list.map((item, index) => <p key={index}>{item}</p>) }
      </>
    )
  }
  
  class App extends React.Component {
    render () {
      return (
        <div>
          <Sub></Sub>
        </div>
      )
    }
  }
  
  // 设置默认值
  Sub.defaultProps = {
    list: [5, 6, 7]
  }
  
  // 给组件 Sub 的属性定义校验规则
  Sub.propTypes = {
    // 指定 list 数据必须为数组
    list: PropTypes.array
  }
  
  export default App
  

• 推荐 方式二：使用 函数参数 设置默认值

  import React from "react";
  import PropTypes from 'prop-types';
  
  // 默认值写这里
  function Sub ({ list = [7, 8, 9] }) {
    return (
      <>
        <div>子组件</div>
        { list.map((item, index) => <p key={index}>{item}</p>) }
      </>
    )
  }
  
  class App extends React.Component {
    render () {
      return (
        <div>
          <Sub></Sub>
        </div>
      )
    }
  }
  // 给组件 Sub 的属性定义校验规则
  Sub.propTypes = {
    // 指定 list 数据必须为数组
    list: PropTypes.array
  }
  
  export default App
  

二、类组件

• 方式一：使用 defaultProps 设置默认值

  import React from "react";
  import PropTypes from 'prop-types';
  
  class Sub extends React.Component {
    render () {
      return (
        <>
          <div>子组件</div>
          { this.props.list.map((item, index) => <p key={index}>{item}</p>) }
        </>
      )
    }
  }
  
  class App extends React.Component {
    render () {
      return (
        <div>
          <Sub></Sub>
        </div>
      )
    }
  }
  
  // 设置默认值
  Sub.defaultProps = {
    list: [5, 6, 7]
  }
  
  // 给组件 Sub 的属性定义校验规则
  Sub.propTypes = {
    // 指定 list 数据必须为数组
    list: PropTypes.array
  }
  
  export default App
  

• 方式二：使用 static defaultProps = {} 设置默认值

  import React from "react";
  import PropTypes from 'prop-types';
  
  class Sub extends React.Component {
    // 设置默认值
    static defaultProps = {
      list: [5, 6, 7]
    }
    render () {
      return (
        <>
          <div>子组件</div>
          {/* 使用方式不变 */}
          { this.props.list.map((item, index) => <p key={index}>{item}</p>) }
        </>
      )
    }
  }
  
  class App extends React.Component {
    render () {
      return (
        <div>
          <Sub></Sub>
        </div>
      )
    }
  }
  
  // 给组件 Sub 的属性定义校验规则
  Sub.propTypes = {
    // 指定 list 数据必须为数组
    list: PropTypes.array
  }
  
  export default App