React.Children.only 期望接收带有 <Link > 组件的单个 React 元素子元素

Posted 2023-02-22

【中文标题】React.Children.only 期望接收带有 <Link > 组件的单个 React 元素子元素

【英文标题】：React.Children.only expected to receive a single React element child with <Link > component

【发布时间】：2018-10-19 05:01:51

【问题描述】：

我正在学习自己做出反应。在我的渲染循环中，我尝试在其中添加元素，以便我可以为每个数据创建超链接。但是我遇到了这个问题：React.Children.only 预计会收到一个 React 元素子级。有人能知道为什么会这样吗？这是我的代码的一部分。希望它更容易理解我的问题。我跳过了编码的某些部分，因为问题似乎发生在渲染部分。

app.js

render() 
return (
  <Router className="App">
    <div>
      <nav className="navbar navbar-default">
        <div className="container-fluid">
          <Link to="/coding-fun">Coding Fun</Link>
        </div>
      </nav>
      <Switch>
        // import condingFun.js file as Coding  
        <Route exact path="/coding-fun" component=Coding />
        <Route path="/coding-fun/:title" component=singleArticle />

      </Switch>
    </div>
  </Router>
);

codingFun.js ps：posts是json数据，我没有在这里添加太多数据。

 class Coding extends Component 
   render() 
      return (
         <div className="nav-text">
            <h1>Coding fun page</h1>
            // posts is data from api, and it renders listPage.js as 
              ListPage 
            <ListPage items=posts />
         </div>
       );
  


 export default Coding;

listPage.js

import React,  Component  from "react";
import  BrowserRouter as Link  from "react-router-dom";

class Listing extends Component 
   constructor(props) 
     super(props);
     this.state =  data: this.props.items ;
    

   render() 
     return (
  <table>
    <tbody>
      // loop "post" data from parent component (items) codingFun.js  
      this.state.data.map(post => (
        <tr key=post.id>
          <td>
            <Link to="coding-fun/" + post.title>post.title</Link>
          </td>
          <td>post.content</td>
        </tr>
      ))
    </tbody>
  </table>
  );

如果我只是添加<Link to="coding-fun/" + post.title>post.title</Link> 这一行，它得到“React.Children.only 预计会收到一个 React 元素子元素。”问题。如果我只在标签中添加 post.title，则没有任何问题。所以我试图将标题作为每一行中的链接。但是不知道怎么弄。

非常感谢

【参考方案1】：

BrowserRouter 中不存在属性 to。将BrowserRouter 与Link 混为一谈也会让您有些困惑，因为在react-router 中存在一个名为Link 的实际组件。这就是你使用它的方式：

import  Link  from 'react-router-dom'

<Link to="coding-fun/" + post.title>post.title</Link>

【讨论】：

我遇到了同样的问题，我从某处复制了import BrowserRouter as Router, Link from "react-router-dom"，然后删除了as Router，因为我不需要它。现在似乎很明显，应该自己解决这个问题。谢谢！

【参考方案2】：

我猜这是因为你做错了导入。导入语句应该是import Link from 'react-router-dom'

【参考方案3】：

您混淆了Router、Link 和Route。所以基本上，

Router 用于包装你的整个应用程序，使其

fullstack-alike

，即可以更改地址栏中的URL，并分别渲染特定的视图 Link 与 <a> 标记的使用方式相同，这意味着单击时它将带您到该 URL 另一方面，Route 用于决定在特定链接下应该呈现什么。这是您应该用来传递子组件的方法

在您的情况下，您应该将 import 语句更改为：

import Link from 'react-router-dom'

希望这有助于解决您的问题:)