Question

更新2019年10月9日：

现在我也做了一个下拉菜单，我还没有得到关于我的问题的答案，因此在另一个论坛上提出了这个问题。为了使所有旧代码和新代码更容易实现，我只删除了论坛本身的链接：https://www.freecodecamp.org/forum/t/creating-a-dynamic-menu-with-reactjs-and-mysql/320491 如果您知道什么，当您在此链接上看到更新的代码时，无论在堆栈溢出还是其他论坛上，我都将非常感谢您提供一些答案。

旧代码：

我已经被困了大约一个星期，以创建带有带有reactJs和MySQL子菜单的动态菜单。我用油漆画了一幅图像，以显示想要的结果：

Dynamic menu, with submenus end result

现在我已经连接好了，所以您可以动态查看所有图像，这意味着它可以从数据库本身获取我的图片所在（来源）的信息。从我的文件夹结构中找到图像，然后将其打印在屏幕上。

我的问题是我想创建一个带有子菜单的动态菜单，就像上面的图片一样。我在google / youtube中搜索了很多内容，但是对我来说，我发现的解决方案要么是硬编码的，要么就是使用reactJs的。

我需要使我的结构能够同时使用reactJs和MySQL数据库。我已经看到很多有关ul =无序列表和li标签，以及select / options标签的信息。但是，如果有人可以向我展示对我有用的解决方案，我将非常感激。您将如何解决？

这是我在MySQL数据库中的菜单表：

menus table

我在浏览选项卡中获取的数据：

under the menus table I have this data inside the browse tab

到目前为止，我的代码：

App.js：

import React, { Component } from 'react';
import './sass/style.scss';
import Admin from "./components/routes/Admin";
import Test from "./components/Test";




class App extends Component {
  render() {
/* klassen Homepage ska till Homepage.js komponenten senare */
      return (
      <div className="App">

        <Admin />

        <p className="TEST"> lorem imsum </p>


        <div className="homepage">

            <div className="container_header">
            </div>

           <div className="container_menu">
                <Test />
            </div>

            <div className="container_stats">
            </div>

            <div className="container_facts">
            </div>

            <div className="container_footer">
            </div>

        </div>

    </div>
    );
  }
}

export default App;

fetchMenu.php：

<?php
    /* This file fetches all the DropdownMenu buttons from the SQL database table menus and order the buttons by id. */
    include_once 'database.php';
    $statement = $pdo->prepare("SELECT * FROM menus ORDER BY id ASC");
    $statement->execute();
    $data = $statement->fetchAll(PDO::FETCH_ASSOC);
    echo json_encode($data, JSON_PRETTY_PRINT);
?>

Test.js：将是DropdownMenu组件

import React, { Component } from "react";
import "../App.scss";

class Test extends Component {
  constructor(props) {
    super(props);


    this.state = {
      allMenus: [],
      picUrl: '../images/Buttons/main_menu_dragons.png;'
    };
  }

 handleDragonMenuClick = DisplaySubMenu => () => {
    this.setState({
      picUrl: DisplaySubMenu
    });
  };

  fetchAllMenus = () => {
    fetch("http://localhost/dragonology/server/fetchMenu.php")
      .then(response => response.json())
      .then(data => {
        console.log(data);
        this.setState({ allMenus: data });
      });
  };

  componentDidMount() {
    this.fetchAllMenus();
  }

  renderMenus = () =>
    this.state.allMenus
      .filter(menu => menu.parentId !== null)
      .map(menu => (
        <div key={menu.id}>
          <img src={menu.picUrl} alt={menu.picName} />
        </div>
      ));

/* If you take away the ! mark the mainMenu will be able to show, but not the subMenu*/
renderMainMenu = () =>
    this.state.allMenus
      .filter(menu => menu.parentId == null)
      .map(menu => (
        <div key={menu.id}>
          <img src={menu.picUrl} alt={menu.picName} />
        </div>
      ));

   renderSubmenu = () =>
    this.state.allMenus
      .filter(menu => menu.parentId === 2)
      .map(menu => (
        <div key={menu.id}>
          <a href={menu.linkUrl}>
            <img src={menu.picUrl} alt={menu.picName} />
          </a>
        </div>
      ));

  render() {
    return (
      <div className="Menu">


<button onClick={this.handleDragonMenuClick('renderMenus :')}><div>{this.renderMainMenu()}</div></button>
        <div id="sub_2">{this.renderMenus()}</div>
      </div>
    );
  }
}

export default Test;

如果您有任何疑问/想要更多信息，请随时与我联系。我很感谢我收到的所有输入信息：）

动态菜单，带有reactJs和MySQL，Mainmenu和子菜单

0 个答案: