如何将 React 组件转换为 Next.JS？

亚当伽玛

我在 React 中找到了这个示例下拉菜单，我发现它很简单而且非常好。

import React, { Fragment } from "react";
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from "reactstrap";

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle1 = this.toggle1.bind(this);
    
    this.onMouseEnter = this.onMouseEnter.bind(this);
    this.onMouseLeave = this.onMouseLeave.bind(this);
    this.state = {
      dropdownOpen1: false,
    };
  }
  toggle1() {
    this.setState(prevState => ({
      dropdownOpen1: !prevState.dropdownOpen1
    }));
  }
  onMouseEnter() {
    this.setState({ dropdownOpen1: true });
  }
  onMouseLeave() {
    this.setState({ dropdownOpen1: false });
  }
  render() {
    return (
      <div>
        <Dropdown
          className="d-inline-block"
          onMouseOver={this.onMouseEnter}
          onMouseLeave={this.onMouseLeave}
          isOpen={this.state.dropdownOpen1}
          toggle={this.toggle1}
        >
          <DropdownToggle caret>Dropdown1</DropdownToggle>
          <DropdownMenu>
            <DropdownItem header>Submenu 1</DropdownItem>
            <DropdownItem>Submenu 1.1</DropdownItem>
          </DropdownMenu>
          &nbsp;&nbsp;&nbsp;
        </Dropdown>
      </div>
    );
  }
}

我想在依赖项和脚本为 React 的项目中使用它。但我不知道如何开始。有人可以给我一个方向吗？只有 1 个元素，我相信我可以放弃构造函数。我看到 React 使用了一些来自的 Dropdown 组件reactstrap，最好的方法是将它们包含在 Next?

远方

您可以在 Next JS 中使用类组件，但大多数 Next JS 文档使用功能组件，因此我建议您将此类组件转换为功能组件。

这是一个快速教程https://nimblewebdeveloper.com/blog/convert-react-class-to-function-component

您可以使用 React Hooks 重新创建逻辑。有现成的钩子可以悬停https://usehooks.com/useHover/

在 NextJS 中添加依赖项与 React 类似。只需导入文件顶部的依赖项

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。