React 组合 - 如何调用父方法

Question

我在 React 中使用组合并想调用父方法。我发现的所有示例都使用继承。

容器组件 - 插入子组件

interface ContainerProps {
  children: ReactNode;
}

function Container(props: ContainerProps) {
  const [showApply, setShowApply] = useState<boolean>(false);

  return (
    <>
        <div>Children</div>
        {props.children}
    </>
  );

  // I want to call this method from the `children`
  function calledByChild(){}
}

组合 - 点击按钮时需要调用Container方法

function CombinedComponent() {
    
    return <Container handleApplyClicked={handleApplyClicked}>
        <Button type="primary" shape="round" onClick={tellContainerThatButtonWasClicked}>
    </Container >
}

当单击CombinedComponent 中的按钮时，我希望它通知Container。我见过的示例使用继承并将父母方法传递给孩子，但在这种情况下，孩子正在其中定义父母。

如何做到这一点？

更新

我尝试将它添加到父组件，但子组件似乎没有添加额外的属性。

{React.cloneElement(props.children as React.ReactElement<any>, { onClick: myFunc })}

子界面/道具

interface CombinedComponentProps{
  // This value is always undefined
  onClick?: () => void;
} 


function CombinedComponent(props: CombinedComponentProps) {
    ...
    // Undefined
    console.log(props.onClick)
}

Answer 1

我最近不得不做一些类似的事情，受this post 的启发，我最终得到了：

const WrapperComponent = ({ children }) => {
  const myFunc = React.useCallback(() => {
    // ...
  }, []);
  
  return React.Children.map(children, (child) => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { onClick: myFunc });
    }
  });
}

[编辑]一个工作演示：

以下 sn-p 演示了如何使用上述方法从包装器/父组件中读取子道具。
请注意，sn-p 加载和运行可能需要几秒钟；我没有调查原因，因为它超出了问题的范围。

const App = () => {
  return (
    <div>
      <h1>MyApp</h1>
      <WrapperComponent>
        <button id='btn1'>btn1</button>
        <button id='btn2'>btn2</button>
        <button id='btn3'>btn3</button>
        <div className='fakeBtn' id='div1'>div1</div>
      </WrapperComponent>
    </div>
  );
}

const WrapperComponent = ({ children }) => {
  const [clickedChildId, setClickedChildId] = React.useState();
  
  const myFunc = React.useCallback((id) => {
    setClickedChildId(id)
  }, [setClickedChildId]);
  
  React.useEffect(() => {
    clickedChildId && console.log(`the clicked child ID is ${clickedChildId}`);
  }, [clickedChildId]);
  
  return React.Children.map(children, (child) => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { onClick: () => myFunc(child.props.id) });
    }
  });
  
}

ReactDOM.render(<App />, document.querySelector('#mountNode'))

div.fakeBtn {
  background-color: #cdf;
  padding: 5px;
  margin: 3px 0;
  border: 1px solid #ccc;
  border-radius: 2px;
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id='mountNode'></div>

Answer 2

你可以通过克隆孩子来做到这一点，并给它你想要的道具：

React.cloneElement(children, {calledByChild})

这样，您将函数calledByChild 添加到子组件中，因此您可以从子组件中调用它。

它可能看起来像这样：

const Parent = ({ children }) => {
  const func = () => console.log("click in Parent");
  return (
    <>
      <div>children</div>
      {cloneElement(children, {func})}
    </>
  );
};

const Children = ({func}) => {
  return <button onClick={func}>Click</button>;
};

看看这个article