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

Question

我有一个正在使用 class 组件进行反应的应用程序，我找到了我想添加到我的代码中的功能代码，但它是使用功能组件制作的。代码在这里 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 组件中添加该控件变量

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

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

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

中工作

Answer 1

您还可以像 class 组件一样在任何地方使用功能组件。顺便说一句，也正在使用，因此无需担心无法在其中使用状态的事情。

使用：

<Box props={props}/>

Answer 2

假设你有

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

并且您想将其更改为 class 组件

在顶部使用这个导入：

import React,{Component} from "react";

并将您的代码更改为如下内容：

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

您的功能组件现已更改为 class 组件。

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

随着 react hooks 的引入也发生了变化，即如果您打算使用 hooks，则不必将功能组件更改为 class 组件。

在您的代码中：useEffect 是一个钩子，您不能在 class 组件中使用它。

我建议简单地在 class 组件中导入功能组件，如果你必须传递一些值，你可以将它作为 prop 传递。

就导入功能组件而言：

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

您不能在 class 组件内使用挂钩。您可以做的是编写一个小包装器，在渲染道具中公开 ref 和 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>
        );
    }
}

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

Convert functional component to class component in React

javascript

reactjs

next.js