HTML 个元素未在 Gatsby 网站上呈现

Question

我在做什么：

在 Gatsby.js 创建我的第一个网站。尝试呈现导航 link 的 HTML 元素“onClick”。当有人单击其中一个 link 时，我希望它显示一个下拉菜单。

export function DropDownMenu(props) {
        return (
               <p>{props}</p>
        )
}

const Header = () => {

    // const [open, setOpen] = useState(false);

    return (
        <Nav>
            <StyledLinkBox to="/"><Logo/></StyledLinkBox>
            <Bars />
            <NavMenu>
                {headerMenuData.map((item, index, dropdown) => (
                    <NavLink to={item.link} key={index} onClick={() => {
                        item.dropdown.map((item, index) => (
                            <DropDownMenu props={item} key={index}/>
                        ))}
                    }>
                        {item.title}
                    </NavLink>
                ))}
            <StyledButton>Early Access</StyledButton>
            </NavMenu>
        </Nav>
    )
}

备注：

我在这里尝试使用 useState 调用另一个函数，但这似乎不起作用，因为你必须点击两次才能发生任何事情。

如果将地图函数中的替换为console.log，它会打印出所有需要出现的元素，这很奇怪。

如果它可以做到这一点，并且映射功能正常工作，为什么我看不到每个项目的 <p>{props}</p>？

Answer 1

使用：

export function DropDownMenu({props}) {
        return (
               <p>{props}</p> /* same as props.props */
        )
}

const Header = () => {

    // const [open, setOpen] = useState(false);

    return (
        <Nav>
            <StyledLinkBox to="/"><Logo/></StyledLinkBox>
            <Bars />
            <NavMenu>
                {headerMenuData.map((item, index, dropdown) => (
                    <NavLink to={item.link} key={index} onClick={() => {
                        item.dropdown.map((item, index) => (
                            <DropDownMenu props={item} key={index}/>
                        ))}
                    }>
                        {item.title}
                    </NavLink>
                ))}
            <StyledButton>Early Access</StyledButton>
            </NavMenu>
        </Nav>
    )
}

您将 item 作为 props 发送，默认情况下，该组件也正在获取 props（如果您发送它），因此您需要对其进行重组或访问props.props.

的数据

你可以这样做：

 <DropDownMenu item={item} key={index}/>

并且：

export function DropDownMenu({item}) {
        return (
               <p>{item}</p> /* same as props.item */
        )
}

更简洁的方法。

HTML 个元素未在 Gatsby 网站上呈现

HTML elements not rendering on Gatsby website

javascript

reactjs

gatsby