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

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

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

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>) }
      </>
    )