Question

我的行为很奇怪，问题是当我为生产而构建时，这是路由逻辑App.tsx：

function App() {
  return (
    <main>
      <Route path="/" component={Agents} exact />
      <Route path="/:agentName" component={Agent} />
    </main>
  );
}

Agents 组件也很好， Agent 也没问题，但是我在 Agent 中有一个组件，< strong> AgentProfile 无法呈现的组件，我不知道为什么， Agent.tsx ：

import React, { useEffect, useState } from 'react';
import { RouteChildrenProps, useParams } from 'react-router';
import { PuffLoader } from 'react-spinners';
import { Container, Row, Col } from 'react-bootstrap';

import classes from './Agent.module.scss';
import Navigation from '../Navigation/Navigation';
import AgentProfile from '../../components/AgentProfile/AgentProfile';
import Abilities from '../Abilities/Abilities';
import { IAgent, getAgent } from '../../API';

interface AgentProps extends React.Props<any>, RouteChildrenProps {}

export default function Agent(props: AgentProps) {
    const params: any = useParams();

    const [agentData, setAgentData] = useState<IAgent>();
    const [isAgentLoaded, setIsAgentLoaded] = useState(false);
    const [activeAbility, setActiveAbility] = useState(0);
    const [isLoading, setIsLoading] = useState(false);

    // fires when url changes
    useEffect(() => {
        // do the folowing only if 'agentName' param exists(/:agentName)
        if (params.agentName) {
            // gets the id from the queryParams
            const id: any = new URLSearchParams(props.location.search).get('id');

            setActiveAbility(0);
            setIsAgentLoaded(false);
            getAgent(id).then(agentData => {
                setIsAgentLoaded(true);
                setTimeout(() => {
                    setAgentData(agentData);
                }, 250);
            }).catch(error => console.log(error));
        }

    }, [props.location, params]);
    
    return (
        <Container fluid style={{padding: 0}}>
            <Row className={classes.HeaderRow} noGutters>
                <Col xl={{offset: 1, span: 3}} className={classes.NavColumn}>
                    <Navigation />
                </Col>
                <Col xl="8">
                    {agentData && <AgentProfile // this doesn't get rendered at all
                        in={isAgentLoaded}
                        imgURL={agentData.imgURL}
                        role={agentData.role}
                        biography={agentData.biography} />}
                </Col>
            </Row>
            {agentData && (<Row className={classes.ContentRow} noGutters>
                <Col xl="6" style={{padding: 60}}>
                    <Abilities
                        abilities={agentData.abilities}
                        onClick={(index) => setActiveAbility(index)} />
                </Col>
                <Col xl="6">
                    <PuffLoader
                        size={200}
                        loading={isLoading}
                        css="margin: auto;"
                        color="white" />
                    <div
                        className={classes.Video}
                        style={{display: isLoading ? 'none' : 'flex'}}>
                        <video
                            loop
                            controls
                            autoPlay
                            onLoadStart={() => setIsLoading(true)}
                            onLoadedData={() => setIsLoading(false)}
                            src={agentData.abilities[activeAbility].videoURL}>
                        </video>
                    </div>
                </Col>
            </Row>)}
        </Container>
    )
}

我真的不知道问题出在什么地方，在开发模式下一切正常，问题出在生产版本中，没有找到解决方案。

一些屏幕截图，请注意chrome开发工具中的elements选项卡，我标记了确切的行：开发中：

生产中的

：

import React from 'react';
import { Transition } from 'react-transition-group';

import classes from './AgentProfile.module.scss';

const duration = 300;

const defaultStyle = {
    transition: `${duration}ms`,
    opacity: 0
};

// "in&hide" states animation styles
const agentInfoStyles: any = {
    entering: { opacity: 0, transform: 'translateY(-100px)' },
    entered:  { opacity: 1, transform: 'none' },
    exiting:  { opacity: 0, transform: 'translateY(100px)' },
    exited:   { opacity: 0, transform: 'none' }
};

// "in&hide" states animation styles
const agentImageStyles: any = {
    entering: { opacity: 0, transform: 'scale(0.9)' },
    entered:  { opacity: 1, transform: 'none' },
    exiting:  { opacity: 0, transform: 'scale(0.9)' },
    exited:   { opacity: 0, transform: 'none' }
};

interface AgentProfileProps extends React.Props<any> {
    imgURL: string;
    role: string;
    biography: string;
    // Animation state control, true = animate "in to the VIEW", false = "hide from the VIEW"
    in: boolean;
}

export default function AgentProfile(props: AgentProfileProps) {
    return (
        <div className={classes.AgentContainer}>
            <Transition
                in={props.in}
                timeout={duration}>
                {state => (<>
                    <img
                        style={{
                            ...defaultStyle,
                            ...agentImageStyles[state]
                        }}
                        draggable={false}
                        src={props.imgURL}
                        alt="Agent"
                        className={classes.AgentImage} />

                    <div
                        className={classes.AgentInfo}
                        style={{
                            ...defaultStyle,
                            ...agentInfoStyles[state]
                        }}>
                        <span>//</span>
                        <p>{props.role}</p>
                        <span>//</span>
                        <p>{props.biography}</p>
                    </div>
                </>)}
            </Transition>
        </div>
    )
}

^^ AgentProfile ^^

Answer 1

好吧，我仍然不知道为什么它不起作用，我是说应该，但是我设法通过更改路由配置使其起作用，例如： App.tsx

<main>
  <Route path="/" component={Agents} />
</main>

然后在 Agent.tsx

中

<Route path={`${props.match.url}:agentName`} render={() => (
  <AgentProfile
    in={isAgentLoaded}
    imgURL={agentData?.imgURL}
    role={agentData?.role}
    biography={agentData?biography} />
)}

而且，老实说，这样做是可行的，但是像这样配置路由确实有意义，但是，另一个路由没有错。它确实可以在开发模式下工作，但在生产模式下却不行。从来没有面对过这样的东西

在生产版本中更改路线时，不会渲染内部组件

1 个答案: