Question

我发现自己正在使用反应模板和路线。我无法将道具传递给内部组件以更改页面标题。

路线的定义如下，在模板中，我为每个路线添加了“ 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的问题。道具将传递到private static final int RC_SAVED_GAMES = 9009; private String mCurrentSaveName = "snapshotTemp"; private void showSavedGamesUI() { SnapshotsClient snapshotsClient = Games.getSnapshotsClient(this, GoogleSignIn.getLastSignedInAccount(this)); int maxNumberOfSavedGamesToShow = 5; Task<Intent> intentTask = snapshotsClient.getSelectSnapshotIntent( "See My Saves", true, true, maxNumberOfSavedGamesToShow); intentTask.addOnSuccessListener(new OnSuccessListener<Intent>() { @Override public void onSuccess(Intent intent) { startActivityForResult(intent, RC_SAVED_GAMES); } }); } @Override protected void onActivityResult(int requestCode, int resultCode, Intent intent) { if (intent != null) { if (intent.hasExtra(SnapshotsClient.EXTRA_SNAPSHOT_METADATA)) { // Load a snapshot. SnapshotMetadata snapshotMetadata = intent.getParcelableExtra(SnapshotsClient.EXTRA_SNAPSHOT_METADATA); mCurrentSaveName = snapshotMetadata.getUniqueName(); // Load the game data from the Snapshot // ... } else if (intent.hasExtra(SnapshotsClient.EXTRA_SNAPSHOT_NEW)) { // Create a new snapshot named with a unique string String unique = new BigInteger(281, new Random()).toString(13); mCurrentSaveName = "snapshotTemp-" + unique; // Create the new snapshot // ... } } }组件而不是Route。

考虑到component能够将道具传递给导入的组件，它可能应该是：

loadable

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;

反应-传递和读取内部组件的道具

3 个答案: