react子父组件通信系列——子传值给子

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

写在前面：

本系列代码源码已经上传github，大家可以随意下载，后面会给上视频讲解辅助，帮助大家更加融会贯通！

源码地址：JACK-ZHANG-coming/react-demo-project: 用于存放一些react相关的基础例子； (github.com)

本文作为本人学习总结之用，同时分享给大家，如果觉得这些内容有对你也有用的话，就请点个赞吧~ 谢谢~

因为个人技术有限，如果有发现错误或存在疑问之处，欢迎指出或指点！不胜感谢！

个人前端博客网站：zhangqiang.hk.cn

欢迎加入博主的前端学习qq交流群：706947563，专注前端开发，共同学习进步！

本系列你将能学到：

父组件传值与函数给子组件，在子组件可使用父组件的值与函数；（该章链接：juejin.cn/post/699147…）
子组件传值与函数给父组件，在父组件里面可使用子组件里面的值与函数；（该章链接：juejin.cn/post/699221…）
子组件传值与函数给子组件，在子组件里面可使用另一个子组件的值与函数（本章讲解）；

子组件传值与函数给子组件，在子组件可使用另一个子组件的值与函数

其跟子传父的实现方法差不多，通过react的hooks新特性，将useRef建立的实例再通过props传给另一个子组件就可以啦~。

父组件关键代码

import React, { useState, useRef, useEffect } from 'react';
import Child1 from './components/Child1/index';
import Child2 from './components/Child2/index';
import Child3 from './components/Child3/index';

const App = () => {
  const [parentValue, setParentValue] = useState('我是父组件的值-');
  const [isChild2value, setIsChild2value] = useState('');
  const Child2Ref = useRef(null); // 给Child2一个ref，让外层的父组件可以调用子组件里面的函数

  useEffect(() => {
    setIsChild2value(Child2Ref?.current?.areGetChild2Value());
  }, [])

  return (
    <div style={{ width: '60%', margin: '0 auto', textAlign: 'center', border: '3px solid red' }}>
      <h2>我是父组件</h2>
      <h4>{parentValue}</h4>
      <button style={{ margin: '20px 0' }} onClick={() => { setParentValue('我触发父组件函数了，' + parentValue); }}>父组件按钮</button>
      <div style={{ display: 'flex', justifyContent: 'center', alignContent: 'center', margin: '20px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'center', alignContent: 'center', width: '50%', margin: '0' }}>
          <button
            onClick={() => {
              Child2Ref?.current?.areSetChild2Value();
              setTimeout(() => {
                setIsChild2value(Child2Ref?.current?.areGetChild2Value());
              }, 100); // 延迟函数 因为useState是异步
            }}
          >
            父组件调用子组件2函数
          </button>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', alignContent: 'center', width: '50%', margin: '0' }}>
          <p>父组件显示子组件2内容：{isChild2value}</p>
        </div>
      </div>
      <Child1 parentValue={parentValue} setParentValue={setParentValue}></Child1>
      <Child2 ref={Child2Ref}></Child2>
      <Child3 areGetChild2Value={Child2Ref}></Child3>

    </div>
  );
}

export default App;

子组件2关键代码

import React, {
  useState,
  useImperativeHandle,
  forwardRef
} from 'react';


const Child2 = (props, ref) => {
  const [child2Value, setChild2Value] = useState('子组件2数值')
  useImperativeHandle(ref, () => {
    return {
      child2Value, // 对象简写，全写为child2Value: child2Value,
      areGetChild2Value: () => {
        return child2Value
      },
      areSetChild2Value: () => {
        // console.log(11111111);
        setChild2Value(child2Value + '子组件2数值-变了！')
      }
    }
  })

  return (
    <>
      <div style={{ width: '60%', margin: '30px auto', padding: '30px 5px', textAlign: 'center', border: '3px solid yellowgreen' }} >
        <h3>我是子组件2</h3>
        <div>子组件2的值：{child2Value}</div>
        <button style={{ margin: '20px 0' }} onClick={() => { setChild2Value(child2Value + '子组件2数值-变了！'); }}>子组件2内置按钮</button>
      </div>
    </>
  )

}

export default forwardRef(Child2);

子组件3关键代码

import React, {
  useState,
  useImperativeHandle,
  forwardRef
} from 'react';


const Child3 = (props, ref) => {

  console.log("props:", props);
  return (
    <>
      <div style={{ width: '60%', margin: '30px auto', padding: '30px 5px', textAlign: 'center', border: '3px solid yellowgreen' }} >
        <h3>我是子组件3</h3>
        <button style={{ margin: '20px 0' }} onClick={() => { props.areGetChild2Value.current?.areSetChild2Value() }}>子组件3内置按钮（调用子组件2函数）</button>
      </div>
    </>
  )

}

export default Child3;

感谢看完！