带有链接的路由不适用于const组件react redux

Question

我想要中的一个链接，但我不知道如何将它与const一起使用。有人能解释一下常量组件吗

import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
const mapStateToProps=  state =>{
return { articles :state.articles};
}
const connectedList = ({ articles }) =>(
articles.map(e=>(
<li key={e.id}>{e.title}</li>
))
<Link to="/Form">Form</Link>//// this line is error thrown
);
const List= connect(mapStateToProps)(connectedList);
export default List;

我知道我做这件事的方式不对，因为我不知道如何以正确的方式实现

Answer 1

您有一些语法错误。最重要的是，您的"connectedList"实际上并没有返回/呈现任何内容。

您可能会遇到其他问题，因为您没有将<li>的数组封装到<ul>中，而且React组件render希望在顶层只有一个元素——这就是为什么我将所有内容封装在<div>中。

为了清晰起见，我清理了一些项目，并使用了React类而不是功能组件：

import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
class List extends React.Component {
render() {
const { articles } = this.props
const articleListItems = articles.map(article => {
return <li key={article.id}>{article.title}</li>
})
return (
<div>
<ul>
{articleListItems}
</ul>
<Link to="/Form">Form</Link>
</div>
)
}
}
const mapStateToProps = state => {
return {
articles: state.articles
}
}
const ListContainer = connect(mapStateToProps, null)(List)
export default ListContainer