Реагировать 0.14 - использовать реактивный маршрутизатор

Ниже приведен мой код. App.js - это корневой файл, about.js - это файл, отображающий только некоторый текст, а index.js обрабатывает все маршруты с помощью реактора-ретранслятора. Я хочу сделать свой about.js в app.js. Он не отображается, если я не пишу "this.props.children" в app.js.

App.js - корневой файл, который отображает все дочерние компоненты внутри него.

"use strict";

import React from 'react';
import { Link } from 'react-router';

class App extends React.Component {
  render() {
    console.log(this.props.children)
    return(
        <div>
            <h1>Hello !</h1>
            <Link to="about">About</Link>
            {this.props.children} **//Is this necessary?**
        </div>
    ) 
  }
}
export default App;

About.js

"use strict";

import React from 'react';

class About extends React.Component {
  render() {
    return(
        <div>
            <h1>About page!</h1>
        </div>
    )
  }
}
export default About;

Index.js - Файл, обрабатывающий маршруты

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, Link, browserHistory } from 'react-router'

/*Require own custom files*/
import App from './app';
import About from './about';

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="about" component={About}/>
    </Route>
  </Router>
), document.getElementById('app'))

Я работаю в React 0.14 с ecma6. Чтобы использовать "реактивный маршрутизатор", нужно ли писать "this.props.children" в корневом компоненте? Если да, то почему? Есть ли другой способ реализовать "реактивный маршрутизатор"?

Ответ 1

Да, необходимо иметь this.props.children.

В вашем index.js вы определили свои маршруты как вложенные. Если вы объявляете о маршрут внутри /, то вам нужно отобразить страницу как дочерний элемент приложения. Если вы не хотите вызывать this.props.children в приложении, сделайте их отдельными маршрутами уровня, но вы потеряете возможность использовать его как часть приложения.

React router в основном передает компонент About в качестве дочернего элемента приложения в соответствии с вашим определением маршрутов. Если вы не используете this.props.children, вы не сможете этого сделать.

Если у вас есть другие страницы в вашем приложении, например, о странице или странице индекса. Они также не будут отображаться без использования this.props.children.

Ответ 2

Да, вам нужно использовать файл {this.props.children} в файле app.js, чтобы отображать дочерние страницы маршрутизации. Поскольку вы устанавливаете app.js, это маршрут индекса в пути маршрутизатора = "/". Он отобразит данные app.js на домашней странице, и когда вы перейдете к следующей дочерней странице, тогда также отобразятся данные app.js и данные дочерней страницы на той же странице. Это будет полезно, если вы хотите повторно использовать компоненты, такие как меню навигации Header, для отображения одного и того же заголовка на всех страницах без повторного создания компонента заголовка.

Ответ 3

this.props.children - свойство, автоматически заданное React для компонента, содержащего дочерние элементы этого компонента. Вы можете использовать интерактивный маршрутизатор, не помещая this.props.children.

В вашем случае this.props.children в компоненте App.js соответствует содержимое, помещенное в тег <App /> в вашем приложении. Если нет тега <App />, тогда ни один из них не будет помещен внутрь, и будет создан только рендер из App.js.

Ответ 4

Вот полный пример использования вложенных маршрутов для ReactSpeed.com.

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={HomePage}>
      <IndexRoute component={CardStack} />
      <Route path="/roadmap" component={Roadmap} />
      <Route path="/ajax" component={CardStackAjax} />
      <Route path="/infographics" component={CardStackInfo} />
      <Route path="/media" component={CardStackMedia} />
      <Route path="/forms" component={CardStackForm} />
      <Route path="/buttons" component={CardStackButton} />
      <Route path="/blog" component={PostSummary} />
      <Route path="/blog/:slug" component={PostDetail} />
    </Route>
    <Route path="*" component={HomePage}>
      <IndexRoute component={MissingRoute} />
    </Route>
  </Router>,
  document.getElementById('app')
);

компонент HomePage рендеринг props.children также указан в GitHub. Маршруты определены в index.jsx, доступных на GitHub здесь. Все вложенные компоненты также перечислены в GitHub.