Question

我想要一个链接，但是然后我不知道如何在 const 中使用它与类一起工作。谁能解释一下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

使用Link路由不适用于const组件反应redux

1 个答案: