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>
    )
  }
}

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

reac学习之路（一） 组件之间的传值

猜你喜欢

reac学习之路（一）组件之间的传值