Props 默认值

Props 默认值

• 场景：如果传入就以传入的参数为主，如果不传那就使用默认值

1. 函数组件

   1. 通过函数默认参数实现

   function Test ({ list, mum = 666 }) {
     return (
       <div>
         {list.map(item => <p key={item}>{item}</p>)}
         <span>{num}</span> // 如果传了那就以实参为主 没传那就以666为主
       </div>
     )
   }
   Test.propTypes = {
     // 定义各种规则
     list: PropTypes.array.isRequired, // 限定这里list参数类型必须是数组类型并且必须传入
     span: PropTypes.element.isRequired
   }
    class App extends React.Component {
      render() {
        reutrn (
          <div>
            <Test num={999}></Test>
          </div>
        )
      }
    }
   

2. 类组件

   1. 通过静态属性实现

   class Test extends React.Component {
     // 设置默认值
     static defaultProps = {
       name: "张三"
     }
     render () {
       return (
         <div>
           this is Test
           <p>{this.props.name}</p> // 如果传了那就以实参为主 没传那就以"张三"为主
         </div>
       )
     }
   }
   
    class App extends React.Component {
      render() {
        reutrn (
          <div>
            <Test name={"码农权"}></Test>
          </div>
        )
      }
    }