Использую библиотеку 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 (
Вопрос заключается в том, как именно пробросить объект пользователя (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 (
Комментариев нет:
Отправить комментарий