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'))

 

标签：react,PropTypes,深入,props,组件,children,ReactDOM
来源： https://www.cnblogs.com/wsl56/p/15528702.html