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

#javascript #reactjs

Использую библиотеку 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
    

Ответы

Ответ 1

Реакт позволяет использовать чистые функции в качестве компонентов. Это дает вам
возможность обернуть компонент 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 (
            
                
            
        );
    }
});


Ответ 2

То, что сказано в ответе Выше можно записать, чуть иначе. Возможно кому-то так будет
удобнее:

Суть решения в том, что внутри  мы заменяем:

    component={Home}


на

    render={()=>}


Для наглядности, в примере выше я убрал props, которые передает по умолчанию React-router.
Если Вы их используете (а Вы скорее всего будете их использовать, то используете вот
такую запись:

    render={(props)=>}


Обратите внимание, что "эти (props) и {...props}" не связаны с передачей данных user,
которые мы хотим передать в props компонента Home и использовать как this.props.user.
В итоге получается так: 

    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'};

            // значение переменной user будет передано в компонет Home 
            // И в компоненте Home Вы сможете использовать this.props.user 
            return (
                
                    }  />
                
            );
        }
    });


Внутри рендер вы видите (props) и (...props) — они не имеют отношения к тем props
, которые мы хотим передать в Home для использования в виде this.props.user
(props) и (...props) это данные, которые передает компоненту Home бибилотека react-router.
 Вы из не используете, можно их убрать, получится:

                
                    }  />
                


P.S.
Еще раз, хотел бы уточить про {...props}
React-router по умолчанию в каждый компонент передает props (Это match, location,
history, и т.д.).
Наша задача состоит в том, чтобы помимо этих данных, также передать какие-то свои
данные. Из-за этого возникают сложности и не получается использовать великолепную интуитивную
и лаконичную передачу props, которая есть в react изначально.
Честно говоря, я сам не знаю, почему авторы React-router не сделали возможность передавать
пользовательские props, так как все это пытаются делать интуитивно: 

    `


Возможно кто-то более глубоко знающий js, объяснит, почему это не сделали интуитивно.