如何从其他组件中的<Component>主体</Component>访问组件状态？

Question

我展示了react的一个很酷的特性，Component state可以在它被使用的地方被使用。

下面是一个来自firebase Link的例子

<FirebaseDatabaseNode
path="user_bookmarks/"
limitToFirst={this.state.limit}
orderByValue={"created_on"}
>
{d => 
return (
<React.Fragment>
<pre>Path {d.path}</pre>
</React.Fragment>
);
}}
</FirebaseDatabaseNode>

在这个例子中，FirebaseDatabaseNode是一个组件，我们在它里面访问d。

我想实现类似的，这样我就可以以类似的方式访问组件的数据。下面是我为Dashboard组件实现类似状态访问的尝试。

export default function Dashboard({
children,
user
}: {
children: ReactNode;
user: any
}) {
const { isOpen, onOpen, onClose } = useDisclosure();
const [selectedMenu, setSelectedMenu] = React.useState(LinkItems[DEFAULT_SELECTED_ITEM])
//...
}

我想在index.js中访问仪表板中的selectedMenu

export default function () {
return (
<Dashboard user={user}>
{selectedMenu => {
return (
<div>{selectedMenu}</div>
)
}
}
</Dashboard>
)
}

但这在我的情况下不起作用，我不知道确切的术语。

Answer 1

最后，当我探索firebase源时，我发现他们正在使用renderand -add-props库。

Dashboard.js

import { renderAndAddProps } from 'render-and-add-props';
//...
export default function Dashboard({
children,
user
}: {
children: ReactNode;
user: any
}) {
const { isOpen, onOpen, onClose } = useDisclosure();
const [selectedMenu, setSelectedMenu] = React.useState(LinkItems[DEFAULT_SELECTED_ITEM])
//...

return (
<div>
//...
// for rendering element with props
{renderAndAddProps(children, { 'selectedMenu': selectedMenu })}
</div>
)
}

在指数//

export default function () {
return (
<Dashboard user={user}>
{({selectedMenu}) => { //                            {({ selectedMenu }: { selectedMenu: LinkItemProps }) if you're using typescript.
return (
<div>{selectedMenu}</div>
)
}
}
</Dashboard>
)
}