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

【问题标题】：Convert functional component to class component in React在 React 中将功能组件转换为类组件
【发布时间】：2020-06-22 15:02:38
【问题描述】：

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

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

【问题讨论】：

就像任何其他 React 组件一样渲染它。例如。在render 方法中，只是return <Box/>..
不清楚您的要求。主要逻辑似乎在Box 组件使用的钩子中。您是只想在代码中渲染Box 组件，还是想提取一些特征并将代码用作您自己代码的蓝图？
@trixn 是的，我想将该功能添加到我的组件中。我需要在我的代码中的组件内使用该控件。需要将那个 useffect 复制到我的类组件中，这样我就可以在我的渲染中使用那个“控制”变量
问题是我需要在一个钩子中声明“控制”变量，所以如果我需要在我的状态中声明它，请注意
将您的组件转换为功能组件可能会更容易，以便您可以使用该挂钩。否则，您将需要编写某种包装器。每个类组件都可以使用钩子编写为功能组件。

标签： javascript reactjs next.js

【解决方案1】：

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

【讨论】：

非常感谢，这看起来就是这样做的方法。我在return children(ref, controls) 上遇到错误，未定义儿童@trixn
它是 React 的一部分，对吧？我需要使用 React.Children？
你是个天才！这很完美，非常感谢兄弟

【解决方案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 hooks 也发生了变化，也就是说，如果你打算使用 hooks，你不必将你的功能组件更改为类组件。

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

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

就导入功能组件而言：

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

【讨论】：

【解决方案3】：

您还可以在任何地方使用函数式组件，例如类组件。顺便说一句，它也在使用，所以不用担心你不能在其中使用状态的东西。

用途：

<Box props={props}/>

【讨论】：

谢谢，但我需要将此 Box 组件合并到我的 App 组件中