|
父组件与子组件通信
// 父组件调用子组件的地方，添加自定义的属性
// 属性的值就是需要传递给子组件的值
// 如果属性的值是变量，boolean类型，number类型，对象，数组，函数，null，undefined
// 需要使用 {} 包裹
// 如果需要设置子组件的属性的默认值
// ?不管是类组件还是函数式组件，可以在组件定义之后通过 Com.defaultProps 设置属性的默认值
// ?但是如果子组件是类组件，还可以通过组件的静态的属性 static defaultProps 设置属性的默认值
// 如果需要验证子组件的属性的数据类型，需要借助于prop-types模块
// ?通过 Com.propTypes = { key: PropTypes.数据类型 }
// 如果需要给该子组件的属性设定 多个数据类型时，
// ?通过 Com.propTypes = { key: PropTypes.oneOfType([ PropTypes.类型1， PropTypes.类型2 ]) }
子组件与父组件通信
import React, { Component } from 'react'
class Child extends Component {
? render () {
? ? return (
? ? ? <button onClick = { () => {
? ? ? ? this.props.fn(10000)
? ? ? }}>传值给父组件</button>
? ? )
? }
}
// 子组件给父组件传值，实际上也是父组件给子组件传值
// 父传给子一个函数，该函数由父组件设定，由子组件调用，调用时传递的参数其实就是子组件传递给父组件的值
export default class componentName extends Component {
? getData = (val) => {
? ? console.log(val)
? }
? render() {
? ? return (
? ? ? <div>
? ? ? ? <Child fn = { this.getData } />
? ? ? </div>
? ? )
? }
}
跨组件通信
在react没有类似vue中的事件总线来解决这个问题，我们只能借助它们共同的父级组件来实现，将非父子关系装换成多维度的父子关系。react提供了context api来实现跨组件通信, React 16.3之后的contextapi较之前的好用。
import React, { Component } from 'react';
class Second extends Component {
? render () {
? ? return (
? ? ? <div>
? ? ? ? { this.props.theme } - { this.props.color }
? ? ? </div>
? ? )
? }
}
const First = (props) => {
? return (
? ? <div>
? ? ? <Second theme = { props.theme } color = { props.color } />
? ? </div>
? )
}
export default class App extends Component {
? state = {
? ? theme: 'dark',
? ? color: 'red'
? }
? render() {
? ? return (
? ? ? <div>?
? ? ? ? <First theme = { this.state.theme } color = { this.state.color }/> ?
? ? ? </div>
? ? );
? }
}
?
import React, { Component } from 'react';
// 1.创建上下文对象
const ThemeContext = React.createContext()
const ColorContext = React.createContext()
// 3.后代组件获取祖先组件传递过来的值
// 如果是类组件,可以通过静态属性或者是 组件.contextType = 上下文对象，在render 函数内部通过this.context获取数据
// 如果遇到多个上下文对象，就显得无能为力
class Second extends Component {
? // static contextType = ThemeContext
? render () {
? ? return (
? ? ? <div>
? ? ? ? { this.context } - { this.props.color }
? ? ? </div>
? ? )
? }
}
Second.contextType = ThemeContext
const First = () => {
? return (
? ? <div>
? ? ? <Second/>
? ? </div>
? )
}
export default class App extends Component {
? state = {
? ? theme: 'dark',
? ? color: 'red'
? }
? render() {
? ? return (
? ? ? <div>?
? ? ? ? {/* 2.上下文对象的Provider 组件配合value属性完成祖先组件向后代组件传值 */}
? ? ? ? <ThemeContext.Provider value = { this.state.theme }>
? ? ? ? ? <ColorContext.Provider value = { this.state.color }>
? ? ? ? ? ? <First /> ?
? ? ? ? ? </ColorContext.Provider>
? ? ? ? </ThemeContext.Provider>
? ? ? ?
? ? ? </div>
? ? );
? }
}
复杂的非父子组件通信在react中很难处理，多组件间的数据共享也不好处理，在实际的工作中我们会使用flux、redux、mobx来实现
|