React - передача и чтение свойств внутренним компонентам

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

Маршруты определены, как показано ниже в шаблоне, я добавил "title" реквизиты для каждого маршрута, чтобы передать их внутренним компонентам.

const loadable = loader =>
  Loadable({
    loader,
    delay: false,
    loading: () => null,
  })

const loadableRoutes = {
  '/registration': {
       component: loadable(() => import('sm-pages/RegistrationPage')),
       title : "Registration"
  },

  '/registrationSuccess': {
        component: loadable(() => import('sm-pages/RegistrationPage')),
        title : "Registration Success"
   },

  ...

  render() {
    return (
      <ConnectedSwitch>
        <Route exact path="/" component={HomePage} />
        {Object.keys(loadableRoutes).map(path => {
          const { exact, ...props } = loadableRoutes[path]
          props.exact = exact === void 0 || exact || false // set true as default
          return <Route key={path} path={path} {...props} />
        })}
        <Route
          render={() => (
            <Page>
              <NotFoundPage />
            </Page>
          )}
        />
      </ConnectedSwitch>
    )
  }

В шаблоне есть разные внутренние компоненты, и в какой-то момент он отображает мой компонент, как показано ниже:

render() {
    const { getContentBuffer } = this.context
    const { pathName, content } = getContentBuffer()
    return isEmpty(content) ? (
      <div className="utils__loadingPage" />
    ) : (
      <div className="utils__content">
        <Breadcrumb name={pathName} />
        {content}
      </div>
    )
  }

Я получаю доступ к props (безуспешно) в моем компоненте следующим образом:

 render() {  
    const props = this.props
    return (        
        <h1>{this.props.title}</h1>
    )
  }

Как мне сделать изменения, чтобы получить доступ к реквизиту заголовка?

заранее спасибо


reactjs react-props react-router
person fciri    schedule 03.10.2018    source источник
comment
Что такое Loadable? Может ли он вообще пропускать реквизит?   -  person Estus Flask    schedule 03.10.2018

Ответы (2)


arrow_upward
0
arrow_downward

Это проблема, аналогичная этот вопрос. Свойства передаются компоненту Route вместо component.

Учитывая, что loadable может передавать реквизиты импортированному компоненту, вероятно, это должно быть:

  let { exact = true, component: WrappedComponent, ...routeProps} = loadableRoutes[path]
  exact = !!exact; // set true as default
  const WrapperComponent = props => <WrappedComponent {...routeProps} {...props}/>;
  return <Route key={path} path={path} exact={exact} component={WrapperComponent} />
person Estus Flask    schedule 03.10.2018
comment
Спасибо @estus, скоро попробую - person fciri; 03.10.2018

arrow_upward
0
arrow_downward

В нашем проекте мы создали вспомогательный компонент, который передает все реквизиты с Route на Component:

// @flow
import * as React from 'react';
import {Route} from 'react-router';
import PropTypes from 'prop-types';

type Props = { component: React.ComponentType<*> };

export default class RouteProps extends React.Component<Props> {
    static propTypes = {
        component: PropTypes.func.isRequired,
    };

    renderMergedProps = (component: React.ComponentType<*>, ...rest: Array<Object>) =>
        React.createElement(component, Object.assign({}, ...rest));

    render() {
        const {component, ...rest} = this.props;
        return (<Route {...rest} render={routeProps =>
            this.renderMergedProps(component, routeProps, rest)}/>);
    }
}

Вы можете просто использовать его как обычно:

<RouteProps path="/" component={HomePage} {...propsForHomePage}/>
person ramusus    schedule 03.10.2018