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