如何将祖父组件中的 function 传递给 ReactJs 中的孙子组件？

Question

我想知道如何将祖父组件中的 function 传递给孙子组件。
我在祖父组件中有一个 function ，它获取id和slice() 。 但是id来自孙子。
顺序是这样的。

<Manager />
    <RecordList />
       <RecordItem />

单击按钮时，它应该为来自的 function 提供 id
没有Context API怎么办？
并使用传递道具给孩子

你能举个例子吗？ 谢谢你们

Answer 1

您可以在 React 中使用Context API并可以将任何数据传递给特定组件下的任何子嵌套器。

上下文 API 反应

编辑既然你提到你不想使用上下文 API。 对于这样的事情，孩子只有一个组件深，您可能可以通过中间孩子传递一些道具。 我会给你一些粗略的想法，因为你在示例中没有写代码，所以不可能写完整。

<Manager>
    const childBtnClick = (params) => {
         // do you stuff here
    }
    <RecordList childBtnClick={childBtnClick}></RecordList>
</Manager>
<RecordList>
    <RecordItem childBtnClick={props.childBtnClick}></RecordItem>
</RecordList>
<RecordItem>
    <Button onClick={() => props.childBtnClick('passwhat data you want here')}></Button>
</RecordItem>