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