Реагировать - передавать и читать реквизиты для внутренних компонентов - PullRequest
Новая
       13

Реагировать - передавать и читать реквизиты для внутренних компонентов

0 голосов
/ 03 октября 2018

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

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

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>
    )
  }

Доступ к реквизитам(безуспешно) в моем компоненте таким образом: 

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

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

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

Ответы [ 3 ]

0 голосов
/ 03 октября 2018

В нашем проекте мы создали вспомогательный компонент, который переводит все реквизиты из 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}/>
0 голосов
/ 21 января 2019 
import React from 'react';
import styled from 'styled-components';

const Title = ({ title }) => <h1>{title}</h1>;

const HeroTitle = styled(Title)`
    text-align: center;
`;

const Hero = (props) =>  {  
    return (
        <HeroTitle title={ props.title } />
    );
};

export default Hero;
0 голосов
/ 03 октября 2018

Эта проблема похожа на этот вопрос .Реквизиты передаются компоненту 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} />
...