Question

我有一个箭头功能组件，如下所示：

const Slideshow = () => {
  ...
  return(
    ...
  );
}

我想像在类组件中那样初始化一个构造函数：

class Slideshow extends React.Component() {
  constructor() {
    super();
    this.state = {
      modal: false
    };
    this.toggleModal = this.toggleModal.bind(this);
  }
  ...
}

我正在为我的项目使用Gatsby，并且在幻灯片组件中静态查询我的数据。我想有条件地基于div的点击显示此数据。如何在箭头函数组件中初始化构造函数？解决此问题的最佳方法是什么？

解决方案： https://github.com/gatsbyjs/gatsby/issues/10523

Answer 1

在功能组件中没有构造函数是不可能的。在功能组件中进行状态表示的方法是使用useState钩子

import React, { useState } from 'react';

const Slideshow = () => {
  const [modal, setModal] = useState(false);
  const toggleModal = () => setModal(previousValue => !previousValue);

  return (
    ...
  );
}

由于没有this，因此无需将切换功能绑定到this。有关钩子的更多信息，请参见此处的react文档：https://reactjs.org/docs/hooks-intro.html

（已解决）Gatsby JS语法：在箭头函数组件中初始化构造函数和状态

1 个答案: