时间戳

首页 > 解决方案 > 使用 React 为同一对象的多个实例动态创建网页

javascript - 使用 React 为同一对象的多个实例动态创建网页

问题描述

我是 React 和 Web 开发的新手，但我想知道是否有一种“动态”创建网页的方法。例如：

我有一个足球联赛的 .json 文件，如下所示：

"api": {
    "results": 1376,
    "leagues": [
        {
            "league_id": 1,
            "name": "World Cup",
        },

        {
            "league_id": 2,
            "name": "Premier League",
        },

        ....

我有另一个名为 Leagues.js 的 .js 文件，它呈现 .json 中的所有足球联赛以及相应的蓝色链接： URL 如下所示：

websiteName.me/Leagues

在此处输入图像描述

目前，这些蓝色链接中的每一个都使用 react-router 路由到单独的 .js 文件。这些 .js 中的每一个都呈现与该特定联赛对应的网页。所以我有一个 WorldCup.js 和一个 PremierLeague.js，链接后面的这些 URL 将是：

websiteName.me/Leagues/WorldCup 

websiteName.me/Leagues/PremierLeague

问题：

而不是为每个单独的联赛都有一个 .js 文件，我怎样才能使它“动态”或者更确切地说“可重用”，这样我只需要一个 LeagueInstance.js 文件来呈现传递给它的道具/信息。

我这样做的动机是因为有 1300 个联赛，我希望所有页面看起来都一样，只是为 .json 文件中的不同联赛对象显示不同的信息。有没有办法做到这一点或更好的建议？

如果有办法做到这一点，我将如何保持 URL 相同？

非常感谢！！！

标签： javascripthtmlreactjsurldynamic

解决方案

与您在每个实例中使用 react 路由器的方式相同，您可以简单地将leagues路由添加为前缀。

所以，你可以创建一个 JS 文件，在你的 route 上path，你会说Leagues/WorldCupand Leagues/PremierLeague。

这将需要您整合代码，因此根据每个代码的数量，这可能很困难。

希望这会有所帮助！

推荐阅读