六、props进阶
一、children属性
- 与普通的props一样,其值可以是任意类型
- 注意
- 如果子组件标签里只存在一个子节点,则children属性值为一个字符串
- 如果子组件标签里存在多个子节点,那么children属性的值为一个索引数组
例如,有父组件代码
1 import React, { Component } from 'react'; 2 import Cmp from './Components/Cmp'; 3 4 class App extends Component{ 5 state = { 6 content: '我是state内容' 7 } 8 renter() { 9 // this.state.content即为子组件标签中的子节点 10 return <Cmp>{this.state.content}</Cmp> 11 } 12 } 13 export default App;
子组件代码
1 // 子组件的props属性里就存在一个children属性,可以获取到父组件传入的内容 2 import React, { Component } from "react"; 3 4 class Cmp extends Component { 5 render() { 6 return <div>{this.props.children}</div>; 7 } 8 } 9 export default Cmp;
二、prop-types
关于JavaScript的class中的静态成员与常规成员
1 class App { 2 static uname = '张三' 3 age = 20 4 } 5 // 常规的属性是在对象里的,如果要用得先实例化 6 console.log((new App).age); // 20 7 console.log((new App).uname); // undefined 8 9 // 静态属性是类里面的,使用的时候不要实例化 10 console.log(App.uname); // 张三 11 12 // 静态成员要优先于常规的成员
1 npm i -S prop-types
1 // 注意PropTypes大小写,大驼峰 2 import PropTypes from "prop-types"
随后依据使用的组件类型选择对应的应用方式
函数组件
1 function App(props){ 2 // 函数组件声明过程 3 return ""; 4 } 5 6 // 为App方法组件挂上验证规则(注意大小写,小驼峰) 7 App.propTypes = { 8 // 待验证的属性名:PropTypes.类型规则[.isRequired] 9 // isRequired表示必传 10 name: PropTypes.string.isRequired, 11 age: PropTypes.number 12 // ... 13 }
类组件
1 class App extends Component{ 2 // 类内部完成检查(注意大小写,小驼峰) 3 static propTypes = { 4 name: PropTypes.string 5 } 6 // 渲染 7 render() { 8 return ""; 9 } 10 }
函数验证:func
本质上来上面类组件的写法与方法组件的写法是一样的,只不过考虑到类组件的代码完整性,我们把规则的验证做成了类的静态成员属性的方式,如果还原成最初的代码则如下:
1 class App extends Component { 2 render() { 3 return( 4 <div>{this.props.flag}--{this.props.num}</div> 5 ) 6 } 7 } 8 9 App.propTypes = { 10 flag: PropTypes.string, 11 num: PropTypes.number.isRequired, 12 };
1 function App(props){ 2 // 函数组件声明过程 3 return ""; 4 } 5 // 为App方法组件挂上默认值 6 App.defaultProps = { 7 // 属性名:默认值 8 title: "标题", 9 // ... 10 }
类组件
1 class App extends Component { 2 // 添加静态成员属性`defaultProps`设置props的默认值 3 static defaultProps = { 4 // 属性名:默认值 5 title: "标题" 6 // ... 7 } 8 }