时间戳

首页 > 解决方案 > 在 React 中将功能组件转换为类组件

javascript - 在 React 中将功能组件转换为类组件

问题描述

我有一个应用程序正在使用类组件进行响应，我找到了一个我想添加到我的代码中的功能代码，但它是使用功能组件制作的。代码在这里https://codesandbox.io/s/framer-motion-animate-in-view-gqcc8但相关部分是这个。

import { useInView } from "react-intersection-observer";
import { motion, useAnimation } from "framer-motion";
import "./styles.css";

function Box() {
  const controls = useAnimation();
  const [ref, inView] = useInView();

  useEffect(() => {
    if (inView) {
      controls.start("visible");
    }
  }, [controls, inView]);

我不知道如何在我的类组件中添加该控件变量

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      curtains: null,
      loading: true,
      renderNav: false
    };
  }

我应该将它添加到我的状态吗？我不明白如何使它在类组件中工作

标签： javascriptreactjsnext.js

解决方案

您不能在类组件内使用钩子。您可以做的是编写一个小包装器，将refand暴露controls在渲染道具中：

const Controls = ({children}) => {
    const controls = useAnimation();
    const [ref, inView] = useInView();

    useEffect(() => {
        if (inView) {
            controls.start("visible");
        }
    }, [controls, inView]);

    return children(ref, controls);
};

然后你可以像这样使用它：

class App extends Component {
    // ...

    render() {
        return (
            <Controls>
                {(ref, controls) => (
                    <motion.div ref={ref} animate={controls}>
                        {/* content */}
                    </motion.div>
                )}
            </Controls>
        );
    }
}

推荐阅读