Использование React contextTypes с реактивным маршрутизатором

Question

Я знаю, что это довольно недокументированная функция, но так как react-router не имеет чистого способа передачи реквизитов дочерним компонентам маршрута, я хотел использовать контекст.

<Router history={history}> 
    <Route component={Application} path="/(:id)"> 
     <IndexRoute component={EditDocument} /> 
    </Route> 
</Router> 

class Application extends Component { 

    static childContextTypes = { 
     charts: PT.array.isRequired, 
    } 

    getChildContext() { 
     return { charts: this.getCharts() }; 
    } 

    render() { 
     return <div>{this.props.children}</div> 
    } 
} 

class EditDocument extends Component { 

    static contextTypes = { 
     charts: PT.array.isRequired, 
    } 

    componentWillMount() { 
     this.context.charts === undefined 
    } 
} 

Я использую React 0.13 пока. Можно ли это решить, используя 0,14?

Answer 1

Вы можете попробовать {React.cloneElement (this.props.children, {someExtraProp: что-то})}

Так вы передаете дополнительный материал к представлениям

например

function renderApp(data) { 

var React = require('react'); 
var ReactRouter = require('react-router'); 
var Router = ReactRouter.Router; 

var App = React.createClass({ 

render: function() { 

    return (

<AppShell> 

     {React.cloneElement(this.props.children, {data:data})} 

    </AppShell> 
); 
} 
}); 

var rootRoute = { 
component: 'div', 
childRoutes: [{ 
path: '/', 
component: {App}, 
///etc 
}] 
}; 

React.render(

React.render (

<Router routes={rootRoute}/>, 
document.body 

);

, 
document.body 
); 

} 
renderApp(data); 

Надежда that полезно, дайте мне знать, если мне нужно, чтобы объяснить это лучше

Answer 2

Вы можете использовать Реагировать маршрутизатор createElement

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

Answer 3

Чтобы передать реквизит компонента переопределить createElement метод Router перед созданием Router:

const createElement = function(Component, props) { 
    return <Component {...props} myProps={{your: 'props'}} />; 
}; 

<Router history={history} createElement={createElement}> 
    <Route component={Application} path="/(:id)"> 
     <IndexRoute component={EditDocument} /> 
    </Route> 
</Router> 

Этот метод работает для нас. То же самое можно сделать на сервере с RoutingContext.