javascript - react 是否有可能从另一个 child 身上激发一个 child 身上实现的功能？

Question

我有 3 个组件:

1. 家长
2. child 1
3. Child2 - 并不是真正的 React 组件(它是一个使用第三个 javascript 库的组件，直接操作 DOM 并且不由 React 管理。该组件从不渲染，仅在 componentDidMount 和 componentWillReceiveProps 上发生变化)

我希望在 Child2 上从 Child1 触发函数(让我们称她为“triggerCallback”)。triggerCallback 的实现必须在 Child2 上，因为它会改变 Child2 的变量(我不想由 Parent 的状态管理的变量!)。

import React, { Component } from "react";

const Child1 = props => {
  return <button onClick={props.triggerCallback}>Click Me</button>;
};

class Child2 extends Component {
  data = [];

  shouldComponentUpdate() {
    return false;
  }

  componentWillReceiveProps(receviedProps) {
      // here I need to add a prop or a callback notification to fire 'triggerCallback', how?
  }

  triggerCallback = action => {
    console.log("i triggerd from Child1!");
    // here mutate data!
  };

  // componentDidMount() {} and some extra methods.....

  render() {
    return null;
  }
}
const Parent = props => {
  // how do i pass function implemnted on Child2 to be called from Child1?
  return (
    <div>
      <Child1 />
      <Child2 />
    </div>
  );
};

提前致谢!

Answer 1

您应该查看render props 。请注意，我无法尝试我的示例，因此请将其视为一种伪代码

import React, { Component } from "react";

const Child1 = props => {
  return <button onClick={props.triggerCallback}>Click Me</button>;
};

class Child2 extends Component {
  data = [];

  shouldComponentUpdate() {
    return false;
  }

  constructor(props) {
      // Feed the function in the setter revieved as props
      super(props);
      props.getCallBack(this.triggerCallback);
  }

  triggerCallback = action => {
    console.log("i triggerd from Child1!");
    // here mutate data!
  };

  // componentDidMount() {} and some extra methods.....

  render() {
    return null;
  }
}
const Parent = props => {
  // Use a state that contains child2's function or an empty callback
  const [func, setFunc] = React.useState(() => void(0));
  // send setter as props to child2
  return (
    <div>
      <Child1 triggerCallback={func} />
      <Child2 getCallBack={(cb) => {setFunc(cb);}} />
    </div>
  );