Question

我展示了 react 的一个很酷的特性，其中组件状态可以从它使用它的主体的地方使用。

这是来自 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 是 Component，我们正在访问它里面的 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 中访问 Dashboard 内的 selectedMenu

export default function () {

    return (
        <Dashboard user={user}>

            {selectedMenu => {
                return (
                    <div>{selectedMenu}</div>
                )
            }
            }
        </Dashboard>
    )
}

但这对我来说不起作用，我不知道确切的术语。

Answer 1

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

仪表板.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>
    )
}

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

1 个答案: