学习react第五天-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35924449/article/details/120581691

本文详细介绍了React中props的使用，包括children属性的解析，如何接收和展示组件内部的内容，无论是文本、标签还是其他组件。同时，文章还探讨了props的验证方法，通过prop-types库来限制和规范props的数据类型，确保组件的正确使用。此外，还介绍了如何设置props的默认值，以备在props未提供时使用。最后，通过一个小练习展示了props验证的实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习react第五天

props中的children属性

children 属性：如果组件是双标签并且双标签内部有内容的话使用children就可以获取到双标签里面的内容（这个内容可以是标签，组件，函数，文本）有点像原生的children

文本

文本内容
class Children  extends react.Component{
  render(){
    return (<span>我是组件{this.props.children}</span>)
  }
}
reactDOM.render(<Children>文本</Children>,document.querySelector("#root"))

组件

也可以是组件
class Children  extends react.Component{
  render(){
    return (<span>我是组件{this.props.children}</span>)
  }
}
const Text=()=>{
  return (<p>我是文本组件</p>)
}
reactDOM.render(<Children><Text><Text></Children>,document.querySelector("#root"))

props中的校验

如果props是数组不会报错假如不是数组程序直接跑不动（）
使用prop-type限制props数据
使用方法组件名.propTypes(必须是这个关键字)={传过去的数据:count:导入的props-types包名字propTypes.number,name:propTypes.Arr}
常见的数据类型:object,array,string,func,bool,number（这里注意func和,bool是缩写） element(react元素（标签）)
必选项 :isRequired是必选项的意思和vue的props:{arr:{type:Array,required:true}}的required:true差不多
制定特定的对象结构:Arr.propsTypes.shape({name:propTypes.String})

prop-types初体验


import propsTypes from  "prop-types"


// 使用props约束数据需要下载
// npm i prop-types 

export default class Types  extends react.Component{
  constructor(props){
    super(props);
    this.list=this.props.count.map((items,index)=><li key={index}>{items.name}</li>)
    this.list=this.props.name
  }
  render(){
    return (<span>{this.list}{this.props.obj.name}</span>)
  }
}

Types.propTypes={
  name:propsTypes.number,
  obj:propsTypes.shape({
    name:propsTypes.string,
  })
}
reactDOM.render(<Types name={1} obj={{name:"name"}}></Types>,document.querySelector("#root"))

小练习 porps-types


// 校验小练习

// 增加propTypes校验

// 属性 a 的类型（number）

// 属性 fn 类型 （function）必填项

// 属性tag （element）

// 属性 filter 对象(area:"上海，price:1999)

export default class Project extends react.Component{
  render(){
    return (<span>421{this.props.fn()}{this.props.a}{this.props.tag}{this.props.filter.area}</span>)
  }
}

Project.propTypes={
  a:propsTypes.number,
  fn:propsTypes.func.isRequired,
  tag:propsTypes.element,
  filter:propsTypes.shape({
    area:propsTypes.string,
    price:propsTypes.price,
  })
}
reactDOM.render(<Project fn={()=>{console.log("这是组件")}} a={19} tag={<span>这是Element</span>} filter={{area:"上海",price:1999}}></Project>,document.querySelector("#root"))

props默认值

// defualtPorps触发：在props没传入对应的值就会产生一个默认值
const Defualt=(props)=>{
  return (<span>{props.age}</span>) 
}
// defualtPorps和propTypes都是一个对象
Defualt.defaultProps={
  age:19,
}
export default Defualt