gpt4 book ai didi

reactjs - 警告 : validateDOMNesting(…): cannot appear as a descendant of

转载 作者:行者123 更新时间:2023-12-04 13:10:00 28 4
gpt4 key购买 nike

我正在使用 React 路由器 dom Link 组件。它基本上是推特的主页。我希望能够在一个 div 组件中有两种类型的链接。一个是链接到用户的个人资料,另一个是发布。我目前收到警告,暂时找不到解决方案。这是屏幕截图作为引用:
enter image description here
我理解这里的问题,我的帖子链接是父元素,我在其中添加了两个用户链接组件,因为用户应该能够在点击帖子内的任何内容时访问帖子页面,除了用户的个人资料照片和用户的姓名。有没有更聪明的方法来实现这一点并保持这样的链接?
代码:

{posts?.map((post) => (
<Link
className={classes.link}
key={post.user.id}
to={`/posts/${post.id}`}
>
<div className={classes.post}>
<Link to={`/users/${post.user.id}`}>
<img
className={classes.profileImage}
src={DefaultLogo}
alt="default-profile"
/>
</Link>
<article className={classes.postDetails}>
<Link
className={classes.link}
to={`/users/${post.user.id}`}
>
<Typography
variant="subtitle1"
className={`${classes.postTitle} ${classes.content}`}
>
{post.user.name}
</Typography>
</Link>
<Typography
variant="subtitle1"
className={`${classes.postText} ${classes.content}`}
>
{post.body}
</Typography>
</article>
</div>
</Link>
))}

最佳答案

是的,在另一个 anchor 标签中放置 anchor 标签会误导一种糟糕的做事方法。但是根据您的要求,您可以使用带有 react router dom history api 的基本按钮。
一个简单的例子:

import {Link, useHistory} from 'react-router-dom'

const App = () => {
const history = useHistory()

// dont forget the [role='link'] or it won't allow feature like open in new tab. Hence, it will behave as <a>

return (
<div
role='link'
onClick={
() => history.push('/user/1')
}
>
<h2>John doe</h2>
<div>here are some use information</div>
<Link role='link' to='/users/1/posts'>
User posts
</Link>
</div>
)

}

关于reactjs - 警告 : validateDOMNesting(…): <a> cannot appear as a descendant of <a>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66409964/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com