props深入

1. children属性

  children属性:表示组件标签的子节点。当组件标签有子节点时,props就会有该属性

  children属性与普通的props一样,值可以是任意值(文本、React元素、组件,甚至是函数)

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  children属性
*/

const App = props => {
  console.log(props)
  props.children()
  
  return (
    <div>
      <h1>组件标签的子节点:</h1>
      {/* {props.children} */}
    </div>
  )
}
ReactDOM.render(
  <App>
    {
      () => console.log('这是一个函数子节点')
    }
  </App>, 
  document.getElementById('root')
)

//children为:JSX或组件
// const Test = () => <button>我是button组件</button>


// const App = props => {
//   console.log(props)
//   return (
//     <div>
//       <h1>组件标签的子节点:</h1>
//       {props.children}
//     </div>
//   )
// }
// ReactDOM.render(
//   <App>
//     {/* <p>我是子节点,是一个p标签</p> */}
//     <Test />
//   </App>, 
//   document.getElementById('root')
// )

// children为:文本节点
// const App = props => {
//   console.log(props)
//   return (
//     <div>
//       <h1>组件标签的子节点:</h1>
//       {props.children}
//     </div>
//   )
// }
// ReactDOM.render(<App>我是子节点</App>, document.getElementById('root'))

2.props校验

  对于组件来说,props是外来的,无法保证组件使用者传入什么格式的数据

  如果传入的数据格式不对,可能会导致组件内部报错

  关键问题:组件的使用者不知道明确的错误原因

props校验:允许在创建组件的时候,就指定props的类型、格式等

作用:捕获使用组件时因为props导致的错误,给出明确的错误提示,增加组件的健壮性

  使用步骤:

    1. 安装prop-types(npm i prop-types)

    2. 导入prop-types包

    3. 使用组件名.propTypes = {}来给组件的props添加校验规则

    4. 校验规则通过PropTypes 对象来指定

  约束规则

    1. 常见类型:array、bool、func、number、object、string

    2. React元素类型:element

    3. 必填项:isRequtred

    4. 特定结构的对象:shape({ })

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  props校验
*/

import PropTypes from 'prop-types'

const App = props => {
  return (
    <div>
      <h1>props校验:</h1>
    </div>
  )
}

//添加props校验
//属性 a 的类型: 数值(number)
//属性 fn 的类型:  函数(func) 并且为必填项
//属性 tag 的类型: React元素(element)
//属性 filter 的类型: 对象({area:'上海',price:1999})
App.propTypes = {
  a:PropTypes.number,
  fn:PropTypes.func.isRequired,
  tag:PropTypes.element,
  filter:PropTypes.shape({
    area:PropTypes.string,
    pricr:PropTypes.number
  })
}

ReactDOM.render(<App fn={() => {}} />, document.getElementById('root'))

3. props的默认值

  场景:分页组件 -> 每页显示条数

  作用:给props设置默认值,在未传入props时生效

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  props的默认值
*/

const App = props => {
  console.log(props)
  return (
    <div>
      <h1>此处展示props的默认值:{props.pageSize}</h1>
    </div>
  )
}

//添加props默认值
App.defaultProps = {
  pageSize: 10
}


ReactDOM.render(<App pageSize={20} />, document.getElementById('root'))

 

上一篇:HTML 之 左侧菜单


下一篇:02_React基本语法