Question

我正在学习自己的反应。在我的渲染循环中，我尝试在里面添加元素，以便我可以为每个数据创建超链接。但我得到了这个问题：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}，则没有任何问题。所以我试着把标题作为每一行的链接。但我不知道该怎么做。

非常感谢

Answer 1

to中不存在BrowserRouter属性。您通过BrowserRouter与Link别名来混淆自己，因为在react-router中存在一个名为Link的实际组件。这就是你如何使用它：

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

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

Answer 2

我猜这是因为你输错了。 import语句应为import { Link } from 'react-router-dom'

Answer 3

您在Router，Link和Route之间感到困惑。所以基本上，

Router用于包装整个应用，使其 fullstack-like ，这意味着可以更改地址栏中的URL并分别呈现特定视图
Link的使用方式与<a>代码相同，这意味着点击后会转到该网址
Route用于决定在特定链接下应呈现的内容。这是您应该用来传递子组件

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

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

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

React.Children.only希望收到一个带有<link />组件

3 个答案: