时间戳

首页 > 解决方案 > 这相当于关于 React 生命周期的类中的 useEffect

javascript - 这相当于关于 React 生命周期的类中的 useEffect

问题描述

我正在使用滑块组件。

在我的示例程序中。Slider.create被调用useEffect()

export default function SectionBasics() {
  React.useEffect(() => {
    if (
      !document
        .getElementById("sliderRegular")
        .classList.contains("noUi-target")
    ) {
      Slider.create(document.getElementById("sliderRegular"), {
        start: [40],
        connect: [true, false],
        step: 1,
        range: { min: 0, max: 100 }
      });
    }
 });
 return (<div id=slider></div>)
}

但是我想把它移到类 extends React.Component

所以，我不能用useEffect()，然后我试着把它放进去render()

class ParamBoard extends React.Component {
  render() {
    if (
      !document
        .getElementById("slider")
        .classList.contains("noUi-target")
    ) {
      Slider.create(document.getElementById("slider"), {
        start: [40],
        connect: [true, false],
        step: 1,
        range: { min: 0, max: 100 }
      });
    }
    return (<div id=slider></div>)
   }

我想这是因为什么时候render()被称为 idslider还没有准备好。

但是我应该把 Slider.create 放在哪里？

标签： javascriptreactjs

解决方案

您应该在组件安装时创建一次滑块实例

在功能组件中，您可以简单地将其useEffect与空数组依赖项挂钩

这相当于componentDidMount()类组件。

它们在组件安装时运行一次。

export default function SectionBasics() {
  React.useEffect(() => {
    // ... your code goes here
  }, []);
  return <div id="slider"></div>;
}

class ParamBoard extends React.Component {
  componentDidMount() {
    // ... your code goes here
  }
  render() {
    return <div id="slider"></div>;
  }
}

推荐阅读