时间戳

首页 > 解决方案 > 通过比较 React 中的数组和状态来创建可编程路由

reactjs - 通过比较 React 中的数组和状态来创建可编程路由

问题描述

我想为不同的项目创建一个类别。从一个数组中，项目被打印出来，这些项目将通过与不同数组中的其他项目进行比较来相应地创建特定的路线，并为此创建一个路线。

对于第一个阵列

const categ = ['Sports', 'Entertainment', 'Politics', 'Global']

{ categ.map((category) => {
                return (<NavLink to={`/${categoryLink}`} key={category}>{category}</NavLink>)
            })}

（我不知道如何制作“categoryLink”

第二个（实际上不是数组）

const debateTwo = store.dispatch(createDebate({
teamOneImg: <img src={Img} />,
teamTwoImg: <img src={Img} />,
startTime: 0,
debateDesc: 'Batman V Superman',
teamOneDesc: 'Batman  ',
teamTwoDesc: 'Superman',
teamOneScore: '50',
teamTwoScore: '50',
category: 'Entertainment',
tags: '#

因此，当我比较它们时，显示“娱乐”类别的链接应该显示这些项目。我该怎么做？或者有没有其他方法可以在 React 中创建类别。我是新手。请帮我

标签： reactjsfrontend

解决方案

在 Reactjs 中没有创建类别的特定方法。你这样做的方式必须为每一个创建路由和组件。

const categ = ['Sports', 'Entertainment', 'Politics', 'Global'];

  • 对于数组中的每个项目或您要创建的任何链接，制作路线和组件。

    <Route path="sports" component={Sports} /> <Route path="entertainment" component={Entertainment} />

或者

{ categ.map((category) => {
  const link = category.toLowerCase();
  return (<Route path=`${link}` component={category} />)
})}

您应该为每个显式创建组件，并以相同的名称导入它们。

但是，如果您想为每个类别动态加载数据：

  • 然后只为category like 创建一个路由，并给它一个id 或param name，如categoryName。

    <Route path="/category/:categoryName" component={category} />

  • 然后为每个类别创建类别组件并根据id加载数据

把它想象成一个类别组件：

const categ = ['Sports', 'Entertainment', 'Politics', 'Global']
function Category () {
    // You can access the params (:/categoryName)
    // you provide to route in this.props.params,
    // like this.props.params.categoryName
    const getCategoryData = categ.filter( category === this.props.params.categoryName
    return (
        <div>{
         getCategoryData
        }</div>
)

这是一个非常简单的例子。我只是想给你一个想法。如何实现类别取决于您的模型实现而不是 Reactjs 库。

推荐阅读