Динамическое создание веб-страницы с использованием React для многих экземпляров одного и того же объекта - PullRequest
Новая
       6

Динамическое создание веб-страницы с использованием React для многих экземпляров одного и того же объекта

0 голосов
/ 30 марта 2020

Я новичок в React и веб-разработке, но мне было интересно, есть ли способ создавать веб-страницы "динамически". Например:

У меня есть файл. json футбольных лиг, который выглядит следующим образом: 

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

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

        ....

У меня есть еще один. js файл с именем Лиги. js, который отображает все футбольные лиги из. json вместе с соответствующей синей ссылкой: URL выглядит следующим образом: 

websiteName.me/Leagues

enter image description here

В настоящее время каждый из эти синие ссылки направляются на отдельные файлы. js с использованием реагирующего маршрутизатора. Каждый из них. js отображает веб-страницу, соответствующую этой конкретной лиге. Итак, у меня есть WorldCup. js и PremierLeague. js, и эти ссылки, следующие по ссылке, будут: 

websiteName.me/Leagues/WorldCup 

websiteName.me/Leagues/PremierLeague

Вопрос:

Вместо наличие файла. js для каждой отдельной лиги, как я могу сделать его «Dynami c» или, скорее, «повторно используемым» таким образом, что мне нужен только один файл LeagueInstance. js, который отображает информацию / информацию, передаваемую ему.

Моя мотивация заключается в том, что существует 1300 лиг, и я хочу, чтобы все страницы выглядели одинаково, просто отображая различную информацию для различных объектов лиги из файла. json. Есть ли способ сделать это или лучшее предложение?

Если есть способ сделать это, как мне также сохранить URL-адреса одинаковыми?

Спасибо большое !!!

1 Ответ

1 голос
/ 30 марта 2020

Таким же образом, как вы используете реагирующий маршрутизатор в каждом из экземпляров, вы можете просто добавить маршрут leagues в качестве префикса.

Итак, вы можете создать один файл JS, и на вашем маршруте path вы скажете Leagues/WorldCup и Leagues/PremierLeague.

Для этого потребуется консолидировать код, поэтому в зависимости от количества кода в каждом из них это может быть затруднено.

Надеюсь, это поможет!

...