一.父组件传参子组件接收
1.父组件传递参数
父组件调用子组件的地方,自定义属性,属性的值为传递的值
如果属性值是number,boolean,Array,Object,null,undefined则用{}包裹
如果是string类型用''包裹
2.子组件如果需要验证数据类型的话,需要使用第三方模块
cnpm i prop-types -S
导包 import PropsTypes from 'prop-types'
1) 验证数据类型
子组件名.propTypes={自定义属性名:PropsTypes.数据类型}
2) 设置必传项 isRequired
子组件名.propTypes={自定义属性名:PropsTypes.数据类型.isRequired}
3) 属性类型设置多项类型且必传 oneOfType && isRequired
子组件名.propTypes={自定义属性名: PropsType.oneOfType([PropTypes.数据类型1,PropTypes.数据类型2,]).isRequired}
4) 设置不传属性的时候默认值
static defaultProps = {属性:属性值}
注意类组件和函数式组件设置默认值时不同,函数式组件没有static,直接设置组件名.defauluProps
二.子组件传参父组件接收
和vue一样,父组件自定义事件,子组件通过点击事件触发父组件的自定义事件把参数带给父组件
三.后代组件通信
跨组件需要通过context函数
先在外部定义一个变量接收context函数
发送属性值的组件用接收的变量名.Provider标签包裹属性 标签内用过value传递属性值
接收的组件通过static contextType接收函数
render渲染this.context就能读取到发送的属性
import React, { Component,createContext } from 'react'
const TitleContext = createContext()
class Title extends Component{
static contextType = TitleContext
render() {
return (<>
Title - {this.context}
</>)
}
}
class Child extends Component{
render() {
return (
<div>
<p>Child </p>
<Title />
</div>
)
}
}
export default class App extends Component {
render() {
return (
<TitleContext.Provider value='传家宝'>
App
<Child/>
</TitleContext.Provider>
)
}
}
注意这种方法只能传递给类组件,函数式组件接收不到传递的值,因为函数式组件没有static
如果需要传递给函数式组件的话需要用Consumer来接收
displayName属性
使用context传递的所有标签名都是context.provider,这样的话很难分辨谁传递的value属性值
通过接收的变量名.displayName = '自定义变量名'来自定义标签名
通过开发者工具更方便查看
