reactjs 警告：validateDOMNesting(...)：不能< a>显示为的后代< a>

ttygqcqt 于 2023-10-17 发布在 React

关注(0)|答案(2)|浏览(398)

我正在使用React router 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>
        ))}

reactjs

来源：https://stackoverflow.com/questions/66409964/warning-validatedomnesting-a-cannot-appear-as-a-descendant-of-a

2条答案

按热度按时间

lbsnaicq1#

是的，在另一个锚标记中包含锚标记是一种错误的做法。但是根据你的需求，你可以使用一个带有react router dom history API的基本按钮。

一个简单的例子：

import {Link, useHistory} from 'react-router-dom'
const App = () => {
  const history = useHistory()
  return (
     <a
      href='/user/1'
     >
       <h2>John doe</h2>
       <div>here are some use information</div>
       {/* Need to prevent the event bubbling */}     
       <Link role='link' to='/users/1/posts'>
           User posts
       </Link> 
     </div>
  )
}

展开查看全部

赞(0）回复(0）举报 2023-10-17

yks3o0rb2#

让我们使用一个专用的导航处理函数。我们将用<p>标记替换那些讨厌的<Link>标记，并将onClick事件处理程序连接到<p>标记。我们还将利用强大的useNavigate React钩子，它可以方便地支持在导航过程中将状态传递给其他组件。
下面是一个修改后的组件示例：

import { useNavigate } from "react-router-dom";
const NestedLinkSolution = () => {
  const navigate = useNavigate();
  const handleNavigation = (event: React.MouseEvent, childRoute: string) => {
    event.stopPropagation();
    navigate(childRoute);
  };
  return (
      <p
        onClick={(event) => {
          handleNavigation(event, "/parentRoute");
        }}>
        🌟 {/* Initial parts of the component */}
        <p
          onClick={(event) => {
            handleNavigation(event, "/childRoute");
          }}>
            🚗 Goto Child Route
        </p>
        {/* rest of the component */}
    </p>
  );
};
export default NestedLinkSolution;

使用这种方法，您不仅可以解决问题，还可以在代码中注入一些风格。

展开查看全部

赞(0）回复(0）举报 2023-10-17

我来回答

reactjs 警告：validateDOMNesting(...)：不能< a>显示为的后代< a>

2条答案

相关问题

热门标签

最新问答