Передача реквизитов для ретрансляции маршрутов детей

У меня возникли проблемы с решением проблемы с маршрутизатором. Сценарий заключается в том, что мне нужно передать детям маршруты набора реквизитов из основного родительского компонента и маршрута.
то, что я хотел бы сделать, это передать childRouteA его propsA и передать childRouteB его propsB. Тем не менее, единственный способ, которым я могу понять, как это сделать, - передать RouteHandler как propsA, так и propsB, что означает, что каждый дочерний маршрут получает каждую дочернюю опору, независимо от того, соответствует ли она. это не проблема блокировки на данный момент, но я могу видеть время, когда я буду использовать два из того же компонента, что означает, что ключи на propA будут перезаписаны ключами с помощью ключей propB.

# routes
routes = (
  <Route name='filter' handler={ Parent } >
    <Route name='price' handler={ Child1 } />
    <Route name='time' handler={ Child2 } />
  </Route>
)

# Parent component
render: ->
  <div>
    <RouteHandler {[email protected]()} />
  </div>

timeProps: ->
  foo: 'bar'

priceProps: ->
  baz: 'qux'

# assign = require 'object-assign'
allProps: ->
  assign {}, timeProps(), priceProps()

Это действительно работает так, как я ожидаю. Когда я ссылаюсь на /filters/time, я получаю компонент Child2. когда я перехожу к /filters/price, я получаю компонент Child1. проблема заключается в том, что, выполняя этот процесс, Child1 и Child2 передаются allProps(), хотя им нужны только реквизиты цены и времени, соответственно. Это может стать проблемой, если эти два компонента имеют одинаковое имя прозвища и вообще не являются хорошей практикой для раздувания компонентов с ненужными реквизитами (так как в моем фактическом случае более двух детей). , поэтому в сводке, есть ли способ передать RouteHandler timeProps, когда я перехожу на маршрут времени (filters/time) и только передаю priceProps на RouteHandler, когда я иду на маршрут цены (filters/price) и не пропускать все реквизиты для всех маршрутов для детей?

Ответы

Ответ 1

Я столкнулся с подобной проблемой и обнаружил, что вы можете получить доступ к реквизитам, установленным в Route через this.props.route в вашем компоненте маршрута. Зная это, я организовал свои компоненты следующим образом:

index.js

React.render((
  <Router history={new HashHistory()}>
    <Route component={App}>
        <Route
          path="/hello"
          name="hello"
          component={views.HelloView}
          fruits={['orange', 'banana', 'grape']}
        />
    </Route>
  </Router>
), document.getElementById('app'));

App.js

class App extends React.Component {
  constructor(props) {
    super(props);
  }

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

HelloView.js

class HelloView extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>
      <ul>
        {this.props.route.fruits.map(fruit => 
          <li key={fruit}>{fruit}</li>
        )}
      </ul>
    </div>;
  }
}

Это использование реактивного маршрутизатора v1.0-beta3. Надеюсь, это поможет!

Хорошо, теперь, когда я лучше понимаю вашу проблему, вот что вы могли бы попробовать.

Поскольку ваши реквизиты вашего ребенка поступают от одного родителя, ваш родительский компонент, а не реагирующий маршрутизатор, должен быть тем, кто управляет тем, какой ребенок получает визуализацию, чтобы вы могли контролировать, какие реквизиты переданы.

Вы можете попробовать изменить маршрут, чтобы использовать параметр, а затем проверить этот параметр в своем родительском компоненте, чтобы отобразить соответствующий дочерний компонент.

Маршрут

<Route name="filter" path="filter/:name" handler={Parent} />

Родительский компонент

render: function () {
  if (this.props.params.name === 'price') {
    return <Child1 {...this.getPriceProps()} />
  } else if (this.props.params.name === 'time') {
    return <Child2 {...this.getTimeProps()} />
  } else {
    // something else
  }
}

Ответ 2

В дочернем компоненте, insted из

return <div>{this.props.children}</div>

Вы можете объединить реквизиты с родительским

var childrenWithProps = React.cloneElement(this.props.children, this.props);
return <div>{childrenWithProps}</div>

Ответ 3

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

Например, здесь я передаю значение пользователя для реагирующего компонента childRoute.

{React.cloneElement(this.props.childRoute, { user: this.props.user })}