react ref和context

ref获取dom

context类似provider和injected,用于嵌套很深的爷孙组件传值

子组件使用父组件创建的context对象,不能自己创建

context创建在函数组件和class组件都是一样的

export let Context1 = React.createContext('')
<Context1.Provider value='Context value 函数组件'>
        <FSon></FSon>
      </Context1.Provider>

 

 

函数组件

1.使用useRef hook来获取ref

2.ref不能获取函数组件， 但能获取普通dom

  let dom1 = useRef<HTMLHeadingElement>(null)
  useEffect(() => {
    console.log(dom1.current)
  }, [])
<h3 ref={dom1}>函数组件</h3>

 

3.Context 只能有value这个props

4.使用useContext hook来获取useContext 

import { Context1 } from '../index'
let value = useContext(Context1)

 

class组件

1.ref必须挂载完成后才能获取,在componentDidMount

2.ref通过React.createRef()方法获取

div1 = React.createRef<HTMLHeadingElement>()
<h3 ref={this.div1}>class组件</h3>

3.context通过context.Consumer去接受

 import { Context1 } from '../index'
 {/* 接收信息 */}
        <Context1.Consumer>{
          (value) => { return <div>{value}</div> }
        }</Context1.Consumer>

 

 

import styles from './index.less';
import { Button } from 'antd';
import React, { useEffect, useRef } from 'react';
import Son from './components/son'
import FSon from './components/fSon'
export let Context1 = React.createContext('')
const HomePage: React.FC = () => {
  class Cc extends React.Component {
    div1 = React.createRef<HTMLHeadingElement>()
    sonCom = React.createRef<HTMLHeadingElement>()
    state = {
      passMes: "我是一个传递的消息 class组件"
    }
    componentDidMount() {
      console.log(this.div1.current)
      console.log(this.sonCom.current)
      // this.sonCom.current.f1()
    }
    render() {
      return <div>
        <h3 ref={this.div1}>
          class组件
        </h3>
        <div>ref必须挂载完成后才能获取,在componentDidMount</div>
        {/* 只能有value这个props */}
        {/* 传递信息 */}
        <Context1.Provider value={this.state.passMes}>
          <Son ref={this.sonCom}></Son>
        </Context1.Provider>
      </div>
    }
  }
  let dom1 = useRef<HTMLHeadingElement>(null)
  useEffect(() => {
    console.log(dom1.current)
  }, [])
  return (
    <div className={styles.container}>
      <h2>ref和context</h2>
      <div>context类似provider和injected,用于嵌套很深的爷孙组件传值</div>
      <div>子组件使用父组件创建的context对象,不能自己创建</div>
      <h3 ref={dom1}>函数组件</h3>
      <div>ref不能获取函数组件</div>
      <Context1.Provider value='Context value 函数组件'>
        <FSon></FSon>
      </Context1.Provider>
      <Cc></Cc>
    </div>
  );
};



export default HomePage;

import { useContext } from 'react';
import { Context1 } from '../index'
const Son: React.FC = () => {
  let value = useContext(Context1)
  return <div>
    <div>{value}</div>
  </div>
};
export default Son;

import React from 'react'
import { Context1 } from '../index'
class GrandSon extends React.PureComponent {
  state = {
    msg: 'grandSon'
  }
  f1() {
    console.log(1)
  }
  render() {
    return (
      <div>
        <div>{this.state.msg}</div>
        {/* 接收信息 */}
        <Context1.Consumer>{
          (value) => { return <div>{value}</div> }
        }</Context1.Consumer>
      </div>

    )
  }
}
// export default Son;
const ForwardedGrandSon = React.forwardRef<HTMLDivElement>((props, ref) => {
  return <GrandSon ref={ref as React.RefObject<GrandSon>} {...props} />;
});
export default ForwardedGrandSon;