Reactjs 获取  不能显示为  的后代.错误，但不太确定如何构建我的代码以避免此警告

发布于07月21日

这是在我创建的一个Reddit克隆中发生的.如果你使用Reddit，你可能还记得，当你在提要页面上时，你可以点击一篇帖子来转到帖子的页面.你也可以点击帖子作者的用户名，然后进入该用户的个人资料页面.

为了实现这一点，我做了以下工作.我的代码实际上并不是这样的 struct ；我将相关组件放在一起来显示我正在谈论的内容，而这是真实情况的大量浓缩版本:

<NavLink to={`/posts/${post.id}`}>
    <SinglePost>
        <div>
            <SinglePostAuthorBar>
                <div>
                    <NavLink to={`/c/${community?.id}`}>c/{community?.name}</NavLink>
                </div>
            </SinglePostAuthorBar>
        </div>
    </SinglePost>
</NavLink>

如您所见，这导致我将一个a标记嵌套在另一个a标记中.

有什么建议可以让我做到这一点，这样我就不会违反这条规则或什么-你有什么？例如，有没有方法可以通过点击按钮或其他方式链接到用户的个人资料页面？目前，我不确定我还能做什么.我需要用户能够点击整个帖子链接到帖子的页面，我还需要用户能够点击作者的用户名链接到作者的个人资料页面.

谢谢!

Edit:我在这里找到的唯一一个类似的问题是this one，但答案有一个 comments 者说，答案实际上是糟糕的做法.然而，这个问题包含了一个图像，它显示了本质上导致我遇到的问题的东西的 struct .

import { useNavigate } from "react-router-dom"; /* ... */ const navigate = useNavigate(); const communityHref = `/c/${community?.id}`; return ( <NavLink to={`/posts/${post.id}`}> <SinglePost> <div> <SinglePostAuthorBar> <div> <span onClick={(e) => { // prevent parent link from triggering e.stopPropagation(); e.preventDefault(); navigate(communityHref); }} data-href={communityHref} tabIndex={0} role="link" > c/{community?.name} </span> </div> </SinglePostAuthorBar> </div> </SinglePost> </NavLink> );

Reactjs 获取  不能显示为  的后代.错误，但不太确定如何构建我的代码以避免此警告

推荐答案

Reactjs相关问答推荐

cypress 不能点击SPAN

将动态元素中的输入数据传输到Reaction

ReactJs；Reaction-Hook-Form：仅当 Select 了特定 Select 列表选项时才显示文本输入

在Reaction常量函数中未更新状态变量

下拉Tailwind CSS菜单与怪异beviour

面对动画警告：未指定`useNativeDriver`.这是必需的选项，并且必须在REACT本机中显式设置为`true`或`False`

Reaction中的数据加载不一致

我应该如何管理设置组件初始状态的复杂逻辑？

在Reaction中导入'；图片&文件夹时出错

阻止组件更新的多分派Redux Thunk或setState是否有任何问题

ReactJS 中的图像加载顺序

React 状态不更新

使用 axios 响应路由 Dom 操作

RTK 查询Mutations 在 StrictMode 中执行两次

如何通过onpress on view in react native flatlist来降低和增加特定视图的高度？

如何将我的 ID 值传递给下一个组件？

在 Formik 表单中访问子组件的值

在嵌套的 Stack Navigator 中的 BottomTabBar 中导航会导致比以前更多的渲染

如何使用 useEffect 和 if 语句 React

哪个 PrivateRouter 实现更好：高阶组件还是替换？