React - 向内部组件传递和读取道具

Question

我发现自己在使用 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>
    )
  }

我以这种方式访问​​组件中的道具（没有成功）：

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

我必须如何更改才能访问标题道具？

提前致谢

Answer 1

这是一个类似于this question 的问题。道具被传递给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} />

Answer 2

在我们的项目中，我们创建了辅助组件，它将所有道具从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}/>

Answer 3

试试这个 .. https://github.com/MrCookiez/onemiracle/tree/routes-setup

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;