0

在 React Router 4 中，可以<Match/>通过使用render而不是component.

<Match pattern="/someroute" render={ () => (
    <SomeComponent { ...additionalProps } />
) } />

另一方面，也可以<Match/>通过在转换匹配包装器组件中包装来在路由之间转换。

引用包装器：

<TransitionMatch pattern="/someroute" component={ RouteComponent } />

TransitionMatch 包装器：

import React, { Component } from "react";
import { Match } from "react-router";
import { TransitionMotion, spring, presets } from "react-motion";

const TransitionMatch = ({ component: Component, ...matchProps }) => {
    const willLeave = () => ({
        zIndex: 100,
        opacity: spring(0, { stiffness: 300, damping: 30, precision: 1 })
    });

    return (
        <Match { ...matchProps } children={ ({ matched, ...props }) => (
            <TransitionMotion
                willLeave={ willLeave }
                styles={ matched ? [ {
                    key: props.location.pathname,
                    style: {
                        opacity: 1
                    },
                    data: props
                } ] : [] } >
                { interpolatedStyles => (
                    <div>
                        { interpolatedStyles.map(config => (
                            <div key={config.key} style={{
                                ...config.style,
                                position: "absolute",
                                top: 0,
                                left: 0,
                                bottom: 0,
                                right: 0
                            }} >
                                <Component { ...config.data } />
                            </div>
                        )) }
                    </div>
                )}
            </TransitionMotion>
        ) } />
    );
};

export default TransitionMatch;

问题是，如何将这两个概念一起应用？

如何有效地将 a 包装<Match />在 TransitionMatch 组件中并将其他道具传递给它？我可以通过render道具传递一个元素，而不是通过 TransitionMatch 的道具传递一个组件，component以便我可以向它添加道具吗？如果是这样，我将如何实现 TransitionMatch？

4

1 回答 1

1

没关系，我自己找到了解决方案。我只需要传递一个额外的道具，<TransitionMatch />然后将其传播到定义上的组件本身TransitionMatch。

参考TransitionMatch：

let mainProps = {
    someMethod: this.someMethod,
    someState: this.state.someState
};

...

<TransitionMatch pattern="/someroute" component={ SomeComponent } compProps={ mainProps } />
<TransitionMatch pattern="/someotherroute" component={ SomeOtherComponent } compProps={ mainProps } />

TransitionMatch定义：

import React, { Component } from "react";
import { Match } from "react-router";
import { TransitionMotion, spring } from "react-motion";

const FadeMatch = ({ component: Component, compProps, ...matchProps }) => (
        <Match { ...matchProps } children={ ({ matched, ...props }) => {
            const motionProps = {
                willLeave: () => ({
                    zIndex: 100,
                    opacity: spring(0, { stiffness: 300, damping: 30, precision: 1 })
                }),
                styles: ( matched ? [ {
                    key: props.location.pathname,
                    style: {
                        opacity: 1
                    },
                    data: props
                } ] : [] )
            };

            return (
                <TransitionMotion { ...motionProps }>
                    { interpolatedStyles => (
                        <div>
                            { interpolatedStyles.map(config => (
                                <div key={config.key} style={{
                                    ...config.style,
                                    position: "absolute",
                                    top: 0,
                                    left: 0,
                                    bottom: 0,
                                    right: 0
                                }} >
                                    <Component { ...config.data } { ...compProps } />
                                </div>
                            )) }
                        </div>
                    ) }
                </TransitionMotion>
            );
        } } />
);

export default FadeMatch;
于 2016-10-27T04:35:49.437 回答