Страницы

Поиск по вопросам

понедельник, 12 ноября 2018 г.

Передача параметров в компонент, создаваемый в react-router

Использую библиотеку react-router для навигации в SPA на базе React. Само приложение имеет вид:
application.jsx
import React from 'react'; import { Router, Route, browserHistory } from 'react-router'; import Home from './home.jsx';
export default React.createClass({ render() { // Объект пользователя. Здесь не важно, откуда именно он берется. const user = {name: 'FooBarBaz'};
return ( ); } });
home.jsx
import React from 'react';
export default React.createClass({ render() { return (

You are {this.props.user.name}
); } });
Вопрос заключается в том, как именно пробросить объект пользователя (user) компоненту Home?

Использую react-router@2.4.1 и react@15.1.0


Ответ

Реакт позволяет использовать чистые функции в качестве компонентов. Это дает вам возможность обернуть компонент Home добавив туда любые свойства.
Код приложения может выглядеть, например, так:
import React from 'react'; import { Router, Route, browserHistory } from 'react-router'; import Home from './home.jsx';
export default React.createClass({ render() { const user = {name: 'FooBarBaz'};
// Это всего лишь обертка для компонента Home, позволяющая передавать // дополнительные параметры через замыкание. const WrappedHome = function(props) { // Конструкция "{...props}" нужна, чтобы не потерять // параметры, переданные от компонента Route return (); };
// Обратите внимание на замену "Home" на "WrappedHome" в параметре // "component". return ( ); } });

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

Отправить комментарий