reactjs - 警告:validateDOMNesting(...):不能作为后代出现
问题描述
我正在使用 React 路由器 dom Link 组件。它基本上是 twitter 的主页。我希望能够在一个 div 组件中拥有两种类型的链接。一个是链接到用户的个人资料,另一个是去发布。我目前收到警告,暂时找不到解决方案。以下是截图作为参考:
我理解这里的问题,我的帖子链接是父元素,我在其中添加了两个用户链接组件,因为当用户点击帖子中的任何内容时,他应该能够访问帖子页面,除了用户的个人资料照片和用户的姓名。有没有更聪明的方法来实现这一点并保持这样的链接?
代码:
{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>
))}
解决方案
是的,在另一个锚标签中放置锚标签会误导一种糟糕的做事方法。但是根据您的要求,您可以使用带有 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>
)
}
推荐阅读
- flutter - Flutter build 发布 AndroidX 不兼容问题
- java - 通过java运行Keras python脚本导致脚本中途突然停止
- mysql - 错误!在 MacOS Mojave 上使用 Homebrew 安装 MySQL 5.6 后服务器退出而不更新 PID 文件
- lua - 有没有办法从罗技 lua 日志控制台获取数据?
- python-3.x - 一条线解决
- angular - Angular 8 获取 BehaviorSubject 的值返回 null
- google-analytics - 谷歌分析会话计数问题
- java - 使用 BufferedReader 和 ScheduledExecutor 记录日志
- python - 遍历列表以查找列表元素的出现
- vue.js - 如何在保存时自动设置 vscode 格式的 Vue 模板?