Reactjs 将状态值传递给组件会导致未定义的错误

我试图找出如何将一些状态值传递给另一个React组件

现在我用的方法很好，但是看起来很乱

所以我定义地下城的细节如下：

const DungeonDetails = ({ children }) => (

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

const地下城详细信息=（{children}）=>(
ReactDOM.createPortal(
{儿童}
,
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>

    )
}

函数地下城条目（）{
const[idVal，setIdValue]=React.useState（false）；
const[titleVal，setTitleValue]=React.useState（false）；
const[typeVal，setTypeValue]=React.useState（false）；
返回(
{titleVal}：地下城详细信息
ID:{idVal}

标题：{titleVal}

类型：{typeVal}

接近

)
}

当我尝试将状态值idVal、titleVal和typeVal传递给地下城细节组件时，它们显示为未定义

所以我唯一能弄明白怎么做的方法就是让它现在工作

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

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

这可能吗

---

谢谢

我不确定您是如何尝试传递道具的，但以下几点应该很好：

const DungeonDetails = ({ titleVal, idVal, typeVal}) => (

    ReactDOM.createPortal(
        <div id="portal_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>
        </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
                 titleVal={titleVal}
                 idVal={idVal}
                 typeVal={typeVal}

            />
        </div>

    )
}

const地下城详细信息=（{titleVal，idVal，typeVal}）=>(
ReactDOM.createPortal(
{titleVal}：地下城详细信息
ID:{idVal}

标题：{titleVal}

类型：{typeVal}

接近

,
document.getElementById（'portal-root'）
)
)
函数DungeonEntries（）{
const[idVal，setIdValue]=React.useState（false）；
const[titleVal，setTitleValue]=React.useState（false）；
const[typeVal，setTypeValue]=React.useState（false）；
返回(
)
}

当你说它们显示为未定义时，确切地说，它们显示为未定义。你能分享不起作用的实现吗？我不确定我是否遗漏了这里的要点，但你不能将它们作为

道具

传递到

地下城详细信息

？问题代码的示例可能比解决方法更有用