Блог

Главная - Вопросы по программированию - Компонент React, отображающий динамические данные на основе URL

Компонент React, отображающий динамические данные на основе URL

#javascript #json #reactjs

#javascript #json #reactjs

Вопрос:

Я хочу создать единый динамический компонент, который отображает данные из файла json в зависимости от URL. Вместо того, чтобы вручную создавать и сохранять каждую страницу.

Например: https://jsonplaceholder.typicode.com/posts

на маршруте страницы: /1 страница будет отображать:

Заголовок = unt aut facere repellat provident occaecati excepturi optio reprehenderit

Body = quia et suscipitnsuscipit recusandae consequuntur expedita et cumnreprehenderit molestiae ut ut quas totamnnostrum rerum est autem sunt rem eveniet architecto .

Как мне вернуть конкретные данные из json? Вот небольшая скрипка: https://jsfiddle.net/pb2tL7ma /

Любые предложения будут оценены!

Комментарии:

1. Вопрос в том, как извлечь параметры из URL? Вам следует подумать о добавлении маршрутизатора, подобного react-router вашему приложению, тогда вы сможете получить доступ к этим параметрам на основе Route

2. @ZekeDroid Я знаю, как извлечь параметр url, как я могу использовать этот параметр для отображения одного отдельного фрагмента данных и сопоставления его с компонентом?

3. Сработал ли какой-либо из ответов для вас? Рассмотрите возможность принятия одного из них , если это так.

Ответ №1:

Один из способов сделать это — использовать React Router с параметрами URL и создать Link для каждой страницы в вашем pages массиве, и использовать этот параметр URL для извлечения страницы, которую вы хотите просмотреть.

Пример (CodeSandbox)

 class App extends React.Component {
  state = {
    pages: []
  };

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/posts`).then(res => {
      this.setState({ pages: res.data });
    });
  }

  render() {
    const { pages } = this.state;

    if (pages.length === 0) {
      return null;
    }
    return (
      <BrowserRouter>
        <div>
          <Route
            exact
            path="/"
            render={() => (
              <ul>
                {pages.map(page => (
                  <li>
                    <Link to={`/${page.id}`}>{page.title}</Link>
                  </li>
                ))}
              </ul>
            )}
          />
          <Route
            path="/:page"
            render={({ match }) => {
              const pageParam = Number(match.params.page);
              const page = pages.find(p => p.id === pageParam);

              return <div>{page.title}</div>;
            }}
          />
        </div>
      </BrowserRouter>
    );
  }
}

Ответ №2:

Попробуйте использовать react-router-dom . Добавьте маршрут следующим App.js образом:

 <Route path='/posts/:id' component={DynamicData} />

И затем вы можете получить это id в своем DynamicData компоненте,:

 this.props.match.params.id

Ответ №3:

Как упоминалось выше, вы можете использовать react-router-dom для этого или просто использовать окно.объект местоположения. Он уже доступен из коробки, поэтому вам не нужна внешняя зависимость.