reac学习之路（一） 组件之间的传值_reac详细博客

近期对于react比较感兴趣 因为最近想要换工作 投递简历的时候发现一些高薪的或者大点的公司 对于react的应用更多点 所以往后就抽点时间把react在看看 之前也有学过 但是好多年没有用了 都忘记差不多了 好了 话不多说 开始我们的探索之路吧

学习react除了基本的语法 首先可能要明确的就是组件了 凡是涉及到组件的 立马想到的就是组件之间的通讯 react的通讯 和vue差不多 接下来就一起来看下吧

1. 父子组件之间的通讯

import React,{createContext} from "react";
class App extends React.Component{
  state={
    message:'我是父组件的数据'
  }
  render(){
    return(
      <div>
        <div>我是父组件</div>
        <Child msg={this.state.message}></Child>
      </div>
    )
  }
}
class Child extends React.Component{
  state={
    message:'我是子组件的数据'
  }
  render(){
    let {msg} = this.props
    return(
      <div>
        <div>我是子组件</div>
        <div>接收到父组件的数据：{msg}</div>
      </div>
    )
  }
}
export default App;

总结：在子组件标签上面自定义属性 属性值为父组件要传递的数据 在子组件内部通过props接收(函数组件通过props 类组件通过this.props) 使用props.属性名 或this.props.属性名 

2. 子父组件之间的通讯

import React,{createContext} from "react";
class App extends React.Component{
  state={
    message:'我是父组件的数据'
  }
  sendMsg = (e)=>{
    console.log(e)
  }
  render(){
    return(
      <div>
        <div>我是父组件</div>
        <Child msg={this.state.message} sendMsg = {this.sendMsg}></Child>
      </div>
    )
  }
}
class Child extends React.Component{
  state={
    message:'我是子组件的数据'
  }
  sendMsg = ()=>{
    this.props.sendMsg(this.state.message)
  }
  render(){
    let {msg} = this.props
    return(
      <div>
        <div onClick={this.sendMsg}>我是子组件</div>
        <div>接收到父组件的数据：{msg}</div>
      </div>
    )
  }
}
export default App;

总结：在子组件标签上面自定义属性 属性值为父组件要传递的函数 在子组件内部通过props接收(函数组件通过props 类组件通过this.props) 使用props.属性名 或this.props.属性名调用传参  父组件通过函数的参数获取   简单来说就是 父组件传递给子组件一个函数 子组件调用函数并传参 

3. 兄弟组件之间的传值 

兄弟组件就不再叙述了 子组件穿给父组件 父组件接收然后传递给另一个子组件或者后续通过状态管理来传递

4.跨组件 

import React,{createContext} from "react";
const { Provider,Consumer}  = createContext()
class App extends React.Component{
  state={
    message:'我是父组件的数据'
  }
  sendMsg = (e)=>{
    console.log(e)
  }
  render(){
    return(
      <div>
        <div>我是父组件</div>
        <Provider value={this.state.message}>
          <Child></Child>
        </Provider>
      </div>
    )
  }
}
class Child extends React.Component{
  state={
    message:'我是子组件的数据'
  }
  render(){
    return(
      <div>
        <div>我是子组件</div>
        <Sun></Sun>
      </div>
    )
  }
}
class Sun extends React.Component{
  state={
    message:'我是孙组件的数据'
  }
  render(){
    return(
      <div>
        <div>{this.state.message}</div>
        <Consumer>
           {value=><span>{value}</span>}
        </Consumer>
      </div>
    )
  }
}
export default App;

总结：通过createContext提供的Provider,Consumer 父组件用Provider包裹 并提供value值 孙组件通过Consumer包裹 通过value函数获取 

其实和vue是很相识的  相信很多人都是有vue的基础 上手因该会很容易的 在者就是 传参肯定涉及格式校验问题了 但是和vue不同的是 没有内置 react需要借助prop-type 

下载依赖

npm i prop-types

使用  引入 然后再组件后面用PropTypes定义校验格式

import PropTypes from "prop-types";
 
Child.propTypes = {
  message:PropTypes.string //string number bool func object  array element  常见的 
}

其次就是必填项 在上面的基础上 进行isRequired串联

import PropTypes from "prop-types";
 
Child.propTypes = {
  message:PropTypes.string,
  msg:PropTypes.string.isRequired //string number bool func object  array element  常见的 
}

再者肯定是涉及到默认值了 这里分为两种方式 一种是函数组件 一种是类组件  

函数组件通过组件.deafultProps 和解构两种方式 

deafultProps

function Child(props){
  return(
    <div>
      {props.message}
    </div>
  )
}
 
Child.defaultProps ={
  message:'测试'
}

解构

function Child({message = "测试"}){
  return(
    <div>
      {message}
    </div>
  )
}

类组件的默认值

1.和上面一样 通过deafultProps

class Child extends React.Component{
  state={
    message:'我是子组件的数据'
  }
  render(){
    return(
      <div>
        <div>我是子组件 {this.props.message}</div>
      </div>
    )
  }
}
Child.defaultProps ={
  message:'测试'
}

2.使用类静态属性声明 static deafultProps 

class Child extends React.Component{
  state={
    message:'我是子组件的数据'
  }
  static defaultProps ={
    message:'测试'
  }
  render(){
    return(
      <div>
        <div>我是子组件 {this.props.message}</div>
      </div>
    )
  }
}

好了 今天的这个组件通讯，格式校验 及默认值就到这里了  后续将继续我的探索之路