React第三天 - 组件通讯与校验

组件通讯

父传子

• props
  • 可传递所有 数据类型 的数据

子传父

• 父组件的内容只能父组件修改，可将update的方法传递给子组件处理变更

祖孙传值=跨组件

• 1. 利用 props 层层传递
• 2. 利用 context

定义全局性 context

import React from 'react'
// react 自带的 上下文api
// 是个全局性的

const MainContext = React.createContext()

export default MainContext;

1. 用法一

<MainContext.Provider value={"zhangsan"}>
  <Hello />
</MainContext.Provider>

import MainContext from './context'

export class Hello extends Component {
  static contextType = MainContext;

  render() {
    return (
      <div>
        { this.context }
        <World />
      </div>
    )
  }
}

export default Hello

用法二

<MainContext.Provider value={"zhangsan"}>
  <Hello />
</MainContext.Provider>

export class Hello extends Component {
  render() {
    return (
      <div>
        { this.context }
      </div>
    )
  }
}
Hello.contextType = MainContext
export default Hello

用法三

<MainContext.Consumer>
  { 
    context => {
      console.log(context)
      return <div>World Page -- { context }</div>
    }
  }
</MainContext.Consumer>

参数校验

• 使用插件 prop-types

yarn add -D prop-types