react学习-组件传值

1.props传值
主要步骤：
在父组件中引用子组件时，在子组件上面写入name1={name2}格式进行传值，name1为子组件中对应的用于接收数据的字段名称，name2为父组件中需要传递到子组件中的值（state中声明的数据）；要在子组件中调用父组件的方法修改父组件的值可以用同样的方法将函数传入到子组件。相关代码如下：
父组件：parent.js

import React, { Component } from "react";
import Son from "./son";

export class parent extends Component {
  state = {
    name: "前端大佬",
    msg: "哈哈哈",
  };
  //   如果要用子组件改父组件的值就触发该方法
  parentChange = (data) => {
    this.setState({ msg: data });
  };
  render() {
    let { name, msg } = this.state;
    return (
      <div>
        <h1>parent page</h1>
        <p>姓名：{name}</p>
        <p>信息：{msg}</p>
        <Son name={name} msg={msg} parentChange={this.parentChange} />
        {/* {...this.state}传递state中的所有值 */}
        {/* <Son {...this.state} parentChange={this.parentChange} /> */}
      </div>
    );
  }
}

export default parent;

子组件：son.js

import React, { Component } from "react";
import PropTypes from "prop-types";

export class son extends Component {
  //   state = {
  //     name: "前端新手",
  //     msg: "略略略",
  //   };
  constructor(props) {
    super();
    this.state = {
      name: "前端新手",
      msg: "略略略",
      //   parentMsg: props.msg,
    };
  }
  handleChange = (e) => {
    // this.setState({ parentMsg: e.target.value });
    this.props.parentChange(e.target.value);
  };
  render() {
    let { name, msg, parentMsg } = this.state;
    let { name: pName, msg: pMsg } = this.props;
    // 父子组件中用到同样的属性名称的时候一般用别名区分
    return (
      <div>
        <h1>son page</h1>
        <p>姓名：{name}</p>
        <p>信息：{msg}</p>
        <p>
          资深前端介绍信息：{pName}--{pMsg}
        </p>
        <input type="text" defaultValue={pMsg} onChange={this.handleChange} />
      </div>
    );
  }
}

// 使用props校验
son.propTypes = {
  name: PropTypes.string,
  msg: PropTypes.string.isRequired,
};
// 未传递值时会显示以下默认值
son.defaultProps = {
  name: "1",
  msg: "2",
};

export default son;

2.context传值
主要步骤：
先创建一个context对象，并导出；
在使用的组件中导入该对象；
使用<MainContext.Provider>包裹组件元素；
在组件内部通过声明static contextType = MainContext或者组件.contextType = MainContext或者使用<MainContext.Consumer>包裹组件元素利用函数调用的方式来使用。相关代码如下：
context.js

import React from "react";
// 创建一个context对象，组件会从组件树中离自身最近的那个匹配的Provider中读取到当前的context值
const MainContext = React.createContext({ name: "哈哈" }); // 默认值

export default MainContext;

hello.js

import React, { Component } from "react";
import MainContext from "./context";
import World from "./word";

export class hello extends Component {
  // static contextType = MainContext;
  render() {
    return (
      <div>
        这是hello组件，是父组件
        {this.context.name}
        <World />
      </div>
    );
  }
}

// 用Class.contextType挂载在class上，然后使用this.context来消费最近Context上的那个值
// 可以在任何生命周期中访问到它，包括render函数中。（多用于类组件）
hello.contextType = MainContext;

export default hello;

word.js

import React, { Component } from "react";
import MainContext from "./context";

export class word extends Component {
  render() {
    return (
      <div>
        <MainContext.Consumer>
          {(context) => {
            console.log(context);
            return <div>这是word组件，是孙组件-{context.name}</div>;
          }}
        </MainContext.Consumer>
      </div>
    );
  }
}

export default word;

main.js

import React, { Component } from "react";
import Hello from "./hello";
import MainContext from "./context";

export class main extends Component {
  render() {
    let obj = { name: "ernest" };
    return (
      <div>
        <MainContext.Provider value={obj}>
          main组件
          <Hello />
        </MainContext.Provider>

        {/* 不使用MainContext.Provider时context中的默认值才会生效 */}
      </div>
    );
  }
}

export default main;