当前位置: 首页 > 知识库问答 >
问题:

反应儿童仅应接收带有组件的单个React元素子元素

曾骁
2023-03-14

我正在学习自己的反应。在我的渲染循环中,我尝试在其中添加元素,以便为每个数据创建超链接。但我有一个问题:反应。儿童仅应接收单个React元素子元素。有人知道为什么会这样吗?这是我的部分代码。希望能让我的问题更容易理解。我跳过了编码的一些部分,因为问题似乎发生在渲染部分。

应用程序。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>
);

###

编码乐趣。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;

列表age.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>
  );
}

}

如果我只是添加

非常感谢


共有3个答案

闻人昕
2023-03-14

您混淆了路由器链接路由。所以基本上,

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

在您的情况下,您应该将导入语句更改为:

从react-router-dom导入{Link}

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

公西修文
2023-03-14

我猜这是因为你导入错误。import语句应该是来自'react router dom'的import{Link}

许马鲁
2023-03-14

属性to不存在于Browser路由器中。你也有点混淆现象Browser路由器Link,因为在react-router中存在一个名为Link的实际组件。这就是你如何使用它:

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

<Link to={"coding-fun/" + post.title}>{post.title}</Link>
 类似资料: