javascript - Jquery 到 React js

Question

我正在尝试将现有的 jquery 转换为 React js。我对 react 真的很陌生，我正在学习，所以如果我问的是愚蠢的问题，请坦白

我有这样的结构

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="http://example.com">About</a>
        <ul>
            <li><a href="#">School</a>
                <ul>
                    <li><a href="#">Lidership</a></li>
                    <li><a href="#">History</a></li>
                    <li><a href="#">Locations</a></li>
                    <li><a href="#">Careers</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我想添加类 li 有 ul，我以前在 jquery 中这样做

$('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon')

我如何在 react 中做同样的事情，我在 react 中使用 node-sass 作为 css

我的 react 课

import * as React from 'react'

import styles from './megaMenu.module.scss'

class megaMenu extends React.Component {
  public render() {
    return (
      <div className={styles.MegaMenu}>
        <div className={styles["menu-container"]}>
          <div className={styles.menu}>
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="http://marioloncarek.com">About</a>
                <ul>
                  <li><a href="#">School</a>
                    <ul>
                      <li><a href="#">Lidership</a></li>
                      <li><a href="#">History</a></li>
                      <li><a href="#">Locations</a></li>
                      <li><a href="#">Careers</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Study</a>
                    <ul>
                      <li><a href="#">Undergraduate</a></li>
                      <li><a href="#">Masters</a></li>
                      <li><a href="#">International</a></li>
                      <li><a href="#">Online</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Research</a>
                    <ul>
                      <li><a href="#">Undergraduate research</a></li>
                      <li><a href="#">Masters research</a></li>
                      <li><a href="#">Funding</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Something</a>
                    <ul>
                      <li><a href="#">Sub something</a></li>
                      <li><a href="#">Sub something</a></li>
                      <li><a href="#">Sub something</a></li>
                      <li><a href="#">Sub something</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li><a href="#">News</a>
                <ul>
                  <li><a href="#">Today</a></li>
                  <li><a href="#">Calendar</a></li>
                  <li><a href="#">Sport</a></li>
                </ul>
              </li>
              <li><a href="http://marioloncarek.com">Contact</a>
                <ul>
                  <li><a href="#">School</a>
                    <ul>
                      <li><a href="#">Lidership</a></li>
                      <li><a href="#">History</a></li>
                      <li><a href="#">Locations</a></li>
                      <li><a href="#">Careers</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Study</a>
                    <ul>
                      <li><a href="#">Undergraduate</a></li>
                      <li><a href="#">Masters</a></li>
                      <li><a href="#">International</a></li>
                      <li><a href="#">Online</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Study</a>
                    <ul>
                      <li><a href="#">Undergraduate</a></li>
                      <li><a href="#">Masters</a></li>
                      <li><a href="#">International</a></li>
                      <li><a href="#">Online</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Empty sub</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    )
  }
}

export default megaMenu

Answer 1

您的示例对于初学者测试来说相当复杂，因为您谈论的是动态生成它，但是您的测试代码不是动态的，您只是将 html 硬编码在其中。

它复杂的原因是，如果你想让它成为动态的，你必须创建一个嵌套的数据结构来表示你的列表，并且你必须制作一个递归组件 - 一个创建更多的组件自身在一定条件下。

我已将您的 HTML 压缩为以下示例数据结构:

class MegaMenu extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            menuItems: [
                {
                    name: 'Home',
                    link: '#'
                },
                {
                    name: 'About',
                    link: 'http://marioloncarek.com',
                    menuItems: [
                        {
                            name: 'School',
                            link: '#'
                        },
                        {
                            name: 'Study',
                            link: '#'
                        },
                        {
                            name: 'History',
                            link: '#'
                        }
                    ]
                }
            ]
        }
    }

    render() {
        return (
            <div className="menu-items"}>{this.state.menuItems.map(menuItem => (<RecursiveComponentHere menuItem={menuItem} />))}</div>
            )
    }
}

然后您将定义您的 RecursiveComponentHere组件来渲染你的 <li>基于 menuItem Prop ，如果该 Prop 有 menuItems属性本身，有条件地更改 className 并在其中呈现 menuItems，如 RecursiveComponentHere元素本身。