reactjs - 将成帧器运动应用于非功能组件

Question

如果要将 framer-motion 添加到功能组件，则将 <motion.div ...> 添加到 render 方法。简单的。但在非功能组件的情况下这是不可能的。假设我想在 Login 组件和 anotherPage 功能组件之间添加一个页面转换效果，那是怎么做的呢？

这里有一些代码供参考：

import React from "react"
import ReactDOM from "react-dom"
import { Route, Switch, BrowserRouter} from "react-router-dom";
import { AnimatePresence} from "framer-motion";

const AnotherPage = () => {
    return <h1>another page</h1>
};
class Login extends Component {
    constructor() {
        ...
    }

    handleLogin = async (event) => {
        ...
    }

    handleInputChange = (event) => {
        ...
    }
    render() {
        return (
                <form onSubmit={this.handleLogin}>

                    <input type="text" name="email" 
                           value={this.state.email}
                           onChange={this.handleInputChange}/>

                    <input type="text" name="password"
                           value={this.state.password}
                           onChange={this.handleInputChange}/>

                    <button className="btn" onClick={this.handleLogin}>login</button>
                </form>
        );
    }
};

const Routers = () => {
    return (
            <BrowserRouter>
                <AnimatePresence>
                    <Switch>
                        <Route exact path="/login" component={Login} />
                        <Route exact path="/anotherPage" component={AnotherPage} />
                    </Switch>
                </AnimatePresence>
            </BrowserRouter>
    );
};
ReactDOM.render(
        <React.StrictMode>
            <Routers/>
        </React.StrictMode>,

        document.getElementById("root")
)

Answer 1

这不是功能性和非功能性组件的问题。您需要将AnimatePresence组件放在Switch. 如果你把它放在 之前Switch，那么你AnimatePresence不知道路线的变化。

一种解决方法可能是将您AnimatePresence放在每个组件的开头。

const AnotherPage = () => {
    return (
        <AnimatePresence>
            <h1>another page</h1>
        </AnimatePresence>
    );
};

export default AnotherPage;

export default class Login extends Component {
    constructor() {
        // ...
    }

    handleLogin = async (event) => {
        // ...
    }

    handleInputChange = (event) => {
        // ...
    }

    render(){
        return (
            <AnimatePresence>
                <h1>login page</h1>
            </AnimatePresence>
        );
    }
}