javascript - React.Children.only 预计会收到一个带有 组件的 React 元素子元素

Question

我正在自学 react 。在我的渲染循环中，我尝试在其中添加元素，以便我可以为每个数据创建超链接。但我遇到了这个问题:React.Children.only expected to receive a single React element child.有人知道为什么会这样吗？这是我的代码的一部分。希望它能让我的问题更容易理解。我跳过了一些编码部分，因为问题似乎发生在渲染部分。

应用程序.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.jsps: 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 expected to receive a single React element child.”问题。如果我只在标签中添加 {post.title}，则没有任何问题。所以我试图将标题作为每一行中的链接。但是我不知道怎么做。

非常感谢

Answer 1

属性 to 在 BrowserRouter 中不存在。通过将 BrowserRouter 与 Link 别名，您也会在那里感到有点困惑，因为在 react-router 中存在一个名为 Link 的实际组件。这就是您使用它的方式:

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

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