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

Question

我有一个应用程序正在使用类组件开发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
    };
  }

我应该把它添加到我的州吗？我不明白如何让它在类组件中工作

Answer 1

您还可以在任何地方使用功能组件，如类组件。顺便说一句，它也在使用状态，所以不需要担心不能在其中使用状态的事情。

使用：

<Box props={props}/>

Answer 2

假设你有

const functionalComponent=()=>{
  return <h1>Functional componenet</h1>
}

您想将其更改为类组件

在顶部使用此导入：

import React,{Component} from "react";

并将代码更改为这样的内容：

    Class functionalComponent extends Component{
       state={}
       render(){
           return <h1>functional component</h1>;
         }
    }

您的功能组件现在更改为类组件。

要在现有的类组件中使用它，您不需要将功能组件更改为类组件，除非您需要本地状态。

随着react钩子的引入，这个钩子也发生了变化，也就是说，如果您计划使用钩子，您不必将功能组件更改为类组件。

在代码中：useffect是一个钩子，不能在类组件中使用它。

我建议简单地在类组件中导入函数组件，如果必须传递一些值，可以将其作为道具传递。

就导入功能组件而言：

import React,{Component} from "react";
import Box from "./Box.js";

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

    this.state = {
      curtains: null,
      loading: true,
      renderNav: false
    };
  render(){
  return(<Box/>);
  }
  }

Answer 3

不能在类组件内部使用挂钩。您可以编写一个小包装器，在渲染道具中公开ref和控件：

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>
        );
    }
}