我正在尝试弄清楚如何将一些状态值传递给另一个 React 组件。

现在我的方法可以正常工作，但看起来很混乱。

因此，我像这样定义 DungeonDetails：

const DungeonDetails = ({ children }) => (

    ReactDOM.createPortal(
        <div id="portal_DungeonDetails">
            {children}
        </div>,
        document.getElementById('portal-root')
    )
)

这是我处理数据的主要函数：

function DungeonEntries() {

    const [idVal, setIdValue] = React.useState(false);
    const [titleVal, setTitleValue] = React.useState(false);
    const [typeVal, setTypeValue] = React.useState(false);



    return (
        <div>
            <DungeonDetails>
                <div>{titleVal} : Dungeon Details</div>
                <div>
                    <p>ID: {idVal} </p>
                    <p>Title: {titleVal} </p>
                    <p>Type: {typeVal} </p>
                    <p><button>Close</button></p>
                </div>
            </DungeonDetails>
        </div>

    )
}

当我尝试将状态值：idVal、titleVal 和 typeVal 传递给 DungeonDetails 组件时，它们显示为未定义。

因此，我能弄清楚如何做到这一点的唯一方法就是让它现在正常工作。

但我希望我可以传递状态值，这样我就不必让它看起来像现在这样。所以我可以将标记移到 DungeonDetails 组件中。

但我无法避免“未定义”错误。

这可能吗？

谢谢！