时间戳

首页 > 解决方案 > 如何在反应路线/组件中获得不同的结果以及组织它们的最佳实践？

reactjs - 如何在反应路线/组件中获得不同的结果以及组织它们的最佳实践？

问题描述

缺少一些基本的基础知识。这是用于前端的。

我有三个路线： /lists/all /lists/pending /lists/completed

它们都有完全相同的布局，所以我想重用模板 /lists/all 用于挂起和完成。

我的文件夹结构：src/views/lists/all.js src/components/table.js

我可以有 2 个额外的视图 js 文件pending.js 和 completed.js，它们只调用具有不同数据的同一个表组件。

有没有办法让 all.js 检查它所在的路由并有条件地加载具有不同数据的表组件？还是将它们分成单独的视图文件是最佳做法，因为它们显示不同的数据？

也许我可以在 componentDidLoad() 内部调用某种方法以及检查当前路由 url 的方法？我可以根据该逻辑获取正确的 ajax 请求吗？思考 $match.route == '/lists/all' else if $match.route == 'lists/pending' 排序的事情。

标签： reactjs

解决方案

根据您的问题，我假设所有这三个列表都具有相同的 API 结构，并且您可以有条件地为所有三个列表加载数据。

由于我们手头有 3 条路线，我们可以从构建这些路线开始：

<Route path={`/listing/:type(all|pending|completed)`} component={List}>

我们使用一个参数:type，以便我们可以识别用户去了哪条路线，但使用正则表达式限制参数应该是all,pending或之一completed。

现在在List组件内部：

class List extends Component {
  componentDidMount() {
    const { match } = this.props;
    const { type } = match.params;

    // Do what you want with type here. type: 'all' | 'pending' | 'completed'
  }
  render() {
    return (
      // render tables
    );
  }
}

推荐阅读