react 父子组件通信

1. 子组件拿到父组件数据

在父组件中定义一个函数，将其传递到子组件中，子组件调用这个回调函数就可以拿到父组件中的数据

2. 父组件拿到子组件数据

• ref

• 回调再回调

查看redux-saga@0.16.2 channel.js源码的时候发现了这样一段代码

function eventChannel(subscribe) {// subscribe是回调函数
  subscribe((input) => {// 回调函数的参数也是个函数
    if (isEnd(input)) {
      close();
      return;
    }
    if (matcher && !matcher(input)) {
      return;
    }
    chan.put(input);
  });
}

function stdChannel(subscribe) {
  const chan = eventChannel((cb) =>
    subscribe((input) => {
      if (input[SAGA_ACTION]) {
        cb(input);
        return;
      }
      asap(() => cb(input));
    })
  );
}

看到上面的代码联想到是不是可以通过类似的方式将子组件的数据传递到父组件中，做了以下尝试
代码地址
Parent.jsx

import React from "react";

import Child from "./Child";

const Parent = () => {
  let innerCb = null;
  const handle = (cb) => {
    console.info("handle");
    // cb("oooo");
    innerCb = cb;//接收子组件的回调，并赋值到全局变量
  };

  const handleClick = () => {
    const ret = innerCb("xxx");// 调用子组件的回调
    console.info("ret:", ret);
  };
  return (
    <div>
      parent
      <button onClick={handleClick}>parent button</button>
      <Child callback={handle}></Child>
    </div>
  );
};

export default Parent;

Child.jsx

import React, { useEffect } from "react";

const Child = ({ callback }) => {
  const data = "child data";
  useEffect(() => {
    callback((d) => {//调用父组件回调，将自己的回调提供给父组件
      console.info("d", d);
      return data;
    });
  }, [callback]);

  return <div>child</div>;
};

export default Child;

点击parent button拿到ret就是子组件中的数据

image.png