Javascript React.Children.仅期望接收带有<；的单个React元素子元素；链接>；成分

我正在学习自己的反应。在我的渲染循环中，我尝试在其中添加元素，以便为每个数据创建超链接。但是我遇到了这个问题：React.Children.只希望接收一个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>
);

render（）{
返回(
编码乐趣
//将condingFun.js文件作为编码导入
);

} }

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;

类编码扩展了组件{
render（）{
返回(
编码乐趣页
//posts是来自api的数据，它将listPage.js呈现为
列表页
);
}
}
导出默认编码；

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>
  );
}

import React，{Component}来自“React”；
从“react router dom”导入{BrowserRouter as Link}；
类列表扩展了组件{
建造师（道具）{
超级（道具）；
this.state={data:this.props.items}；
}
render（）{
返回(
//从父组件（项目）codingFun.js循环“post”数据
{this.state.data.map（post=>(
{post.title}
{post.content}
))}
);
}

}

如果我只是添加

{post.title}

在这一行中，它得到了“React.Children.仅期望接收单个React元素子元素”问题。如果我只在标记中添加{post.title}，那么就没有任何问题。因此，我尝试将标题作为每行中的链接。但我不知道怎么做

---

非常感谢浏览器路由器中不存在属性

to

。您还将

BrowserRouter

与

Link

混淆，因为react路由器中存在一个名为

Link

的实际组件。这就是你如何使用它：

import { Link } from 'react-router-dom'

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

从'react router dom'导入{Link}
{post.title}

我猜是因为您导入错误。import语句应该是

import{Link}from'react router dom'

您混淆了

路由器

、

链接

和

路由

。所以基本上

• Router

  用于包装整个应用程序，使其与fullstack相似，这意味着可以更改地址栏中的URL，并分别呈现特定视图

• 链接

  的使用方式与
  标记的使用方式相同，这意味着单击时它会将您带到该URL
• 另一方面，

  路由

  ，用于决定在特定链接下应该呈现什么。这是您应该用来传递子组件的内容

在您的情况下，您应该将

import

语句更改为：

从'react router dom'导入{Link}

---

希望这有助于解决您的问题：）

我也遇到了同样的问题，我从某个地方复制了“react Router dom”中的

导入{BrowserRouter as Router，Link}，然后删除了
as Router
，因为我不需要它。现在看来很明显，我应该自己解决这个问题。谢谢