react props state（React中Props的详细使用和props的校验）
导读：props中的children属性 组件标签只用有子节点的时候,props就会有该属性; children的属性跟props一样的,值可以是任意值;(文本,React元素,组件,函数 组件:...
props中的children属性
组件标签只用有子节点的时候,props就会有该属性;
children的属性跟props一样的,值可以是任意值;(文本,React元素,组件,函数)
组件: <ClassCom> 传递的数据 </ClassCom>
这样的组件标签中就会有子节点
props中的children的简单使用
<!-- 主页面 -->
import React from react;
import ReactDOM from react-dom;
import ClassCom from "./components/ClassCom"
ReactDOM.render(<ClassCom>传递的数据</ClassCom>,document.getElementById(root))
子组件
import React from "react";
// 函数组件
// const ClassCom = (props) => {
// return (
// <div>
// <h2>组件</h2>
// { props.children }
// </div>
// )
// }
// 类组件
class ClassCom extends React.Component{
render() {
return (
<div>
<p>-------我是子组件--------</p>
{this.props.children}
</div>
)
}
}
export default ClassCom
props中children的属性是标签
<!-- 主页面 -->
import React from react; //这个是react这个包 ，我们是需要的
import ReactDOM from react-dom; //这个是react的虚拟dom
import ClassCom from "./components/ClassCom"
ReactDOM.render(<ClassCom>
<p>我是一个p标签</p>
</ClassCom>, document.getElementById(root))
<!-- 子组件 -->
import React from "react";
// 类组件
class ClassCom extends React.Component{
render() {
return (
<div>
<p>-------我是子组件--------</p>
{this.props.children}
</div>
)
}
}
export default ClassCom
props的校验
为什么会有props的校验 。因为props是外来的 。
我们无法保证使用者传递过来的参数是什么格式的 。
如果我们这个props是数组 ，而使用者传递的是数字 。
这个时候会出现意想不到的后果 。
所以我们需要对props进行校验 ，如props的类型 ，格式 。
校验步骤
1.需要安装一个包 yarn add prop-types 或者 npm i prop-types
2.导包 import PropTypes from prop-types
3. 组件名.PropTypes = { 属性:PropTypes.类型 }
PropTypes的类型有
PropTypes.array 数组
PropTypes.bool 布尔
PropTypes.func 函数
PropTypes.number
PropTypes.object
PropTypes.string
props校验的简单使用
//组件
import React from "react";
// 导包
import PropTypes from prop-types
// 类组件
class ClassCom extends React.Component{
render() {
return (
<div>
{
this.props.arr.map(item => <li key={item.id }> { item.name}</li>)
}
数字： {this.props.num }
</div>
)
}
}
ClassCom.propTypes = {
// 希望传递过来的arr是数组
arr: PropTypes.array,
num:PropTypes.number
}
export default ClassCom
当传递的数据不符合条件的时候
import React from react; import ReactDOM from react-dom; import ClassCom from "./components/ClassCom" const list = [{name:李大为,id:1},{name:夏洁,id:2}] ReactDOM.render(<ClassCom arr={list} num={100}></ClassCom>, document.getElementById(root)) Props的约束规则 // num属性是必填写的 num: PropTypes.number.isRequired, // 特定结果的对象 myObj: PropTypes.shape({ name: PropTypes.string, age: PropTypes.number, sex:PropTypes.bool }) // 表示是一个React元素 tag:PropTypes.element Props的默认值的设置 // ClassCom是组件名称 ClassCom.defaultProps = { pageSize:10 } 使用的时候 页数: { this.props.pageSize} Props限制的简单使用 import React from react; import ReactDOM from react-dom; import ClassCom from "./components/ClassCom" const list = [{ name: 李大为, id: 1 }, { name: 夏洁, id: 2 }] const obj = { name: 123, //这个类型不正确 sex: 男, age:18 } ReactDOM.render(<ClassCom arr={list} num={100} myObj={ obj}></ClassCom>, document.getElementById(root)) import React from "react"; // 导包 import PropTypes from prop-types // 类组件 class ClassCom extends React.Component{ render() { return ( <div> { this.props.arr.map(item => <li key={item.id }> { item.name}</li>) } 数字： {this.props.num} 页数 { this.props.pageSize} </div> ) } } ClassCom.propTypes = { // 希望传递过来的arr是数组 arr: PropTypes.array, // num属性是必填写的 num: PropTypes.number.isRequired, // 特定结果的对象 myObj: PropTypes.shape({ name: PropTypes.string, age: PropTypes.number, sex:PropTypes.bool }), // 表示是一个React元素 tag: PropTypes.element } <!-- 这是默认值 --> ClassCom.defaultProps = { pageSize:10 } export default ClassCom创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！