React函数组件中如何让子组件调用模板组件内部函数？

这完全可以实现，核心是用Render Props模式——让children作为一个函数，接收组件内部的方法/状态后返回JSX，这也是Formik这类库常用的写法。

修改后的Template组件 #

const Template = ({ 
  children,
}) => {
  const myFunction = () => {
    alert("test");
  };

  // 判断children是否为函数，是则传入myFunction调用，否则直接渲染
  return (
    <>
      <div>
        {typeof children === 'function' ? children({ myFunction }) : children}
      </div>
    </>
  );
};

对应的MyStory写法 #

export const MyStory: Story = {
  render: args => (
    <Template>
      {({ myFunction }) => (
        <>
          My children
          <button onClick={myFunction}>click me</button>
        </>
      )}
    </Template>
  )
};

原理说明 #

• 当你给Template传入的children是函数时，组件内部会调用这个函数，并把myFunction作为参数传递进去
• 子组件的渲染逻辑里就能直接拿到并使用这个内部方法
• 这种方式既保留了组件的封装性，又能灵活地让子组件使用父组件内部的能力

内容的提问来源于stack exchange，提问作者offlineanton