React 实现二级联动（楼梯效果）

燃烧的冰山..

于 2021-09-07 15:14:20 发布

阅读量655

点赞数

CC 4.0 BY-SA版权

文章标签： react.js javascript html5

本文链接：https://blog.csdn.net/weixin_43822237/article/details/120158596

本文介绍如何使用React.js配合JavaScript和HTML5，模仿饿了么的二级联动菜单，创建出楼梯效果。内容包括Less样式的应用及最终实现的效果图展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模仿饿了么实现一个二级联动的效果；

import "../css/Leftrightlinkage.less";
import React, { Component } from "react";

export default class Leftrightlinkage extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      list: [
        { id: 1, title: "列表1" },
        { id: 2, title: "列表2" },
        { id: 3, title: "列表3" },
        { id: 4, title: "列表4" },
        { id: 5, title: "列表5" },
        { id: 6, title: "列表6" },
        { id: 7, title: "列表7" },
        { id: 8, title: "列表8" },
        { id: 9, title: "列表9" },
        { id: 10, title: "列表10" },
      ],
      LeftList: [
        { id: 1, title: "列表1", height: 600 },
        { id: 2, title: "列表2", height: 600 },
        { id: 3, title: "列表3", height: 600 },
        { id: 4, title: "列表4", height: 600 },
        { id: 5, title: "列表5", height: 600 },
        { id: 6, title: "列表6", height: 600 },
        { id: 7, title: "列表7", height: 600 },
        { id: 8, title: "列表8", heigh