Question

我正在使用NextJS。我正在布局上。在我的布局内，有一些带有链接的导航组件。当我尝试在内部使用锚创建链接时，控制台将返回我：

Nextjs-Reactjs-不变违规：仅预期React.Children。接收单个React元素的子对象

不过，这只是NextJS的经典模式，下面是我的链接的示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="GET" target="my-iframe">

  <select id="searchEngine">
    <option value='octopart'>OctoPart</option>
    <option value='digikey' selected>DigiKey</option>
    <option value='mouser'>Mouser</option>
    <option value='generalsearch'>General Search</option>
  </select>

  <input id="search-input" placeholder="Search part ..." value="audio">

  <button type="submit">Submit</button>

</form>


<iframe id="my-iframe" name="my-iframe"></iframe>

只有在我这样做的情况下，它才有效：

<Link href={{pathname:'/blog'}} className={style.links_items}
to="/blog"> <a title="Blog">BLOG -</a></Link>

但随后，我得到了警告：

您正在<Link href={{pathname:'/blog'}} className={style.links_items} to="/blog"> BLOG -</Link>内直接使用字符串。这种用法是不推荐使用。请添加一个<Link>标记作为<a>的子代

如果有人有任何提示，那会很好，

谢谢

Answer 1

链接中a元素之前有一个空格。这意味着链接具有两个子节点：一个文本节点（其中有空格）和a元素。删除空间：

<Link href={{pathname:'/blog'}} className={style.links_items}
to="/blog"><a title="Blog">BLOG -</a></Link>

Nextjs-Reactjs-链接模式-不变违规：React.Children.only仅接收单个React元素子元素

1 个答案: