[JavaScript知识库]学习react第五天

学习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>)
  }
}
reactDOM.render(<Children><p>我是组件</p></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中的校验

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