Как правильно использовать this.props.children?

Question

[Smuzzzzzi]

Нужно чтоб при переходе на

<Route path="/user/:username/settings" component={UserProfileContainer.Settings} />

Менялся this.props.children

import UserProfileContainer from './containers/UserProfile';

Мой индекс

<Route path="/user/:username" component={UserProfileContainer} />

UserProfileContainer

return (
      <UserProfileDetail
        name={name}
      />
    );

UserProfileDetail

<main className="content">
  <div className="title">
     <h1>{name}</h1>
    <div>1 ссылка</div>
     <div>2 ссылка</div>
     <div>3 ссылка</div>
  </div>
  <div className="content">
     <h1>{this.props.children}</h1>
  </div>
</main>

Answer 1

[Антон Спирин]

Как правильно использовать this.props.children?

import React from 'react';
import ReactDOM from 'react-dom';

const SomeComponent = ({ name }) => (
  <span>{name}</span>
);

const SomeContainer = ({ children }) => (
  <div>{children}</div>
);

const Example = () => (
  <SomeContainer>
    <SomeComponent name="John" />
  </SomeContainer>
);

ReactDOM.render(
  <Example />,
  document.getElementById('root');
);

Результат:

<div id="root">
  <div>
    <span>John</span>
  </div>
</div>

Comments

[Smuzzzzzi]

Спасибо за ответ.
Но немного не понятно все равно!
Как мне вызывать индекс?
то есть к примеру
user/settings
children = settings

<SomeContainer>
    <SomeComponent name="John" />
  </SomeContainer>

Это вместо {this.props.children} ???

[Антон Спирин]

Smuzzzzzi, да children - это дочерний элемент или компонент в JSX.
По поводу вашей задачи можно просто сделать вложенные маршруты.
Главный роут измените на:

<Route path="/user/:username" component={UserProfileDetail} />

В компонент UserProfileDetail добавьте вложенные маршруты:

<main className="content">
  <div className="title">
     <h1>{name}</h1>
    <div>1 ссылка</div>
     <div>2 ссылка</div>
     <div>3 ссылка</div>
  </div>
  <div className="content">
     <Switch>
       <Route exact path={`${this.props.match.path}/settings`} component={Settings} />
     </Switch>
  </div>
</main>

[Smuzzzzzi]

Антон Спирин, Ок, а component={Settings} откуда возьмется?
То есть у меня в профиле должно быть 5 ссылок
к примеру settings, comments, followers и тд
То есть типо так?

const SomeComponent = ({ settings}) => (
 <Settings />
);

const SomeComponent = ({ followers}) => (
 <followers />
);

[Антон Спирин]

Smuzzzzzi,

Ок, а component={Settings} откуда возьмется?

Вы его должны написать, если он еще не написан и импортировать.

То есть типо так?

Нет вы просто импортируете компоненты и используете компоненты в роутах:

<main className="content">
  <div className="title">
     <h1>{name}</h1>
     <div>1 ссылка</div>
     <div>2 ссылка</div>
     <div>3 ссылка</div>
  </div>
  <div className="content">
     <Switch>
       <Route exact path={`${this.props.match.path}/settings`} component={Settings} />
       <Route exact path={`${this.props.match.path}/comments`} component={Comments} />
       <Route exact path={`${this.props.match.path}/followers`} component={Followers} />
     </Switch>
  </div>
</main>

c children вам для решения этой задачи работать не надо.

[Smuzzzzzi]

Антон Спирин, Сделал как вы сказали
Но не выводятся компоненты
ошибок никах нет, просто пусто

[Антон Спирин]

Smuzzzzzi, должно работать. Демо.

[Антон Спирин]

Smuzzzzzi, ошибка в примере была. Вместо this.props.match надо использовать this.props.match.path. Приношу извинения.

[Smuzzzzzi]

Антон Спирин, Подскажите, а как в таком случае менять document.title?
Чтоб settings имел свой тайтл, а например followers свой!

[Антон Спирин]

Smuzzzzzi, есть хорошая библиотека react-helmet
В примерах почему-то нет, можно title свойством передавать:
<Helmet title={title} />