React router и this.props.children – как передать состояние this.props.children

Я использую React-router в первый раз, и я не знаю, как думать в нем еще. Вот как я загружаю свои компоненты во вложенные маршруты.

точка входа .js

ReactDOM.render(     , document.getElementById('app') ); 

App.js

  render: function() { return ( 
{this.props.children}
); }

Таким образом, дочерний элемент моего приложения – это компонент контента, который я отправил. Я использую Flux, и у моего App.js есть состояние и прослушивание изменений, но я не знаю, как передать это состояние до this.props.children , Перед использованием response-router мой App.js явно определяет всех детей, поэтому состояние передачи было естественным, но я не вижу, как это сделать сейчас.

Этот вопрос сводится к тому, как вы передаете реквизит для детей?

Ответ июнь 2018 года

Сегодняшняя технология:

  • reactjs 16+
  • React Router 4 : react-router-dom
  • Рендеринг реквизитов из официальных документов

Предполагая некоторый компонент с состоянием:

 import React from 'react' import { BrowserRouter, Route } from 'react-router-dom' // some component you made import Title from './Title' class App extends React.Component { // this.state state = { title: 'foo' } // this.render render() { return (  // when the url is `/test` run this Route's render function:  routeProps => // render Title component  } />  ) } } 

Это работает, потому что this.props.children – это функция:

 // "smart" component aka "container" class App extends React.Component { state = { foo: 'bar' } render() { return this.props.children(this.state.foo) } } // "dumb" component aka "presentational" const Title = () => (  {title => 

{title}

}
)

Пример по codeandbox

Мой предыдущий ответ oldschool, который я бы больше не рекомендовал:

Используя пару вспомогательных методов React, вы можете добавить состояние, реквизиты и все остальное в this.props.children

 render: function() { var children = React.Children.map(this.props.children, function (child) { return React.cloneElement(child, { foo: this.state.foo }) }) return 
{children}
}

Тогда ваш дочерний компонент может получить доступ к этому через реквизит, this.props.foo .

Вы можете использовать метод React «cloneElement» для этого. Когда вы клонируете элемент, в это время вы можете пройти в реквизитах. Используйте клон вместо оригинала в рендере fn. например:

  render: function() { var childrenWithProps = React.cloneElement(this.props.children, {someProp: this.state.someProp}); return ( 
{childrenWithProps}
); }

Существует также возможность использования Context . React-Router полагается на это, чтобы предоставить доступ к объекту Router в компонентах маршрута.

Из другого ответа я задал аналогичный вопрос:

Я быстро собрал пример, используя контексты для codepen . MainLayout определяет некоторые свойства, которые могут использоваться детьми с использованием контекста: users и widgets . Эти свойства используются компонентами UserList и WidgetList . Обратите внимание, что им необходимо определить, что им нужно для доступа из контекста в объекте contextTypes .

 var { Router, Route, IndexRoute, Link } = ReactRouter var MainLayout = React.createClass({ childContextTypes: { users: React.PropTypes.array, widgets: React.PropTypes.array, }, getChildContext: function() { return { users: ["Dan", "Ryan", "Michael"], widgets: ["Widget 1", "Widget 2", "Widget 3"] }; }, render: function() { return ( 
{this.props.children}
) } }) var Home = React.createClass({ render: function() { return (

Home Page

) } }) var SearchLayout = React.createClass({ render: function() { return (
{this.props.children}
) } }) var UserList = React.createClass({ contextTypes: { users: React.PropTypes.array }, render: function() { return (
    {this.context.users.map(function(user, index) { return
  • {user}
  • ; })}
) } }) var WidgetList = React.createClass({ contextTypes: { widgets: React.PropTypes.array }, render: function() { return (
    {this.context.widgets.map(function(widget, index) { return
  • {widget}
  • ; })}
) } }) var Routes = React.createClass({ render: function() { return ; } }) ReactDOM.render(, document.getElementById('root'))
в var { Router, Route, IndexRoute, Link } = ReactRouter var MainLayout = React.createClass({ childContextTypes: { users: React.PropTypes.array, widgets: React.PropTypes.array, }, getChildContext: function() { return { users: ["Dan", "Ryan", "Michael"], widgets: ["Widget 1", "Widget 2", "Widget 3"] }; }, render: function() { return (
{this.props.children}
) } }) var Home = React.createClass({ render: function() { return (

Home Page

) } }) var SearchLayout = React.createClass({ render: function() { return (
{this.props.children}
) } }) var UserList = React.createClass({ contextTypes: { users: React.PropTypes.array }, render: function() { return (
    {this.context.users.map(function(user, index) { return
  • {user}
  • ; })}
) } }) var WidgetList = React.createClass({ contextTypes: { widgets: React.PropTypes.array }, render: function() { return (
    {this.context.widgets.map(function(widget, index) { return
  • {widget}
  • ; })}
) } }) var Routes = React.createClass({ render: function() { return ; } }) ReactDOM.render(, document.getElementById('root'))
  • Компонент не восстанавливается при изменении параметров маршрута
  • Как вложить маршруты в React Router v4?
  • Программный переход в React-Router v4
  • Давайте будем гением компьютера.