我正在学习自己的反应。在我的渲染循环中,我尝试在其中添加元素,以便为每个数据创建超链接。但我有一个问题:反应。儿童仅应接收单个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>
);
}
}
如果我只是添加
非常感谢
您混淆了路由器
、链接
和路由
。所以基本上,
Router
用于包装整个应用程序,使其与fullstack相似,这意味着可以更改地址栏中的URL,并分别呈现特定视图在您的情况下,您应该将导入
语句更改为:
从react-router-dom导入{Link}
希望这有助于解决您的问题:)
我猜这是因为你导入错误。import语句应该是来自'react router dom'的import{Link}
属性to
不存在于Browser路由器
中。你也有点混淆现象Browser路由器
与Link
,因为在react-router中存在一个名为Link
的实际组件。这就是你如何使用它:
import { Link } from 'react-router-dom'
<Link to={"coding-fun/" + post.title}>{post.title}</Link>
我试图使用antd库创建一个web表,但遇到了一个错误 “react.development.js:1251未捕获错误:react.Children.only应接收单个react元素子元素”。我完全陷入困境,无法找到解决办法。有人能帮忙吗?
当我试图在WordPress中添加
获取错误错误:反应。Children.only预期接收一个React元素子元素。真的卡住了,有人帮忙吗?
问题内容: 我希望能够弄清楚哪些React组件与某个DOM元素相关联。 例如,假设我有一个div,并且正在使用React渲染整个应用程序。div必须由React组件呈现-但是哪一个呢? 我知道React提供了方法“ getDOMNode ”来获取与React组件相关联的DOM节点,但是我想做相反的事情。 这可能吗? 问题答案: 没有。 React中的中心概念是您实际上在DOM中没有控件。相反,您的
本文向大家介绍react怎么拿到组件对应的DOM元素?相关面试题,主要包含被问及react怎么拿到组件对应的DOM元素?时的应答技巧和注意事项,需要的朋友参考一下 refs.
我希望通过react中的JSX将可拖动列表项添加到我的DOM中。 DOM的预期输出应如下所示: 但实际产出是: 我尝试过的当前代码: