javascript - 使用 API json 对象设置动态菜单？

问题描述

我不确定我能做些什么来完成这项工作......所以我正在调用 API 数据（这只是一堆嵌套的 json 对象）来创建一个菜单。到目前为止，我已经让它能够渲染第一层对象（第一个 img），当您单击每个元素时，下一层会显示在它下方（第二个 img）。这是递归的，所以当我单击“级别 2”中的一个元素时，我认为它适用于下一个级别，但事实并非如此。

任何人都可以看到我可以在我的代码中进行哪些更改以使其正常工作吗？

class Menu extends React.Component {
  state = {
    categories: [],
    list: ""
  };


  //handle displaying list of values when clicking on button
  //search for list of values within object
  handleSearch = (obj, next, event) => {
    // console.log(event.target.name);
    Object.keys(obj).forEach(key => {
      if (typeof obj[key] === "object") {
        if (next === key) {
          //create DOM  CHILDREN
          createData(Object.keys(obj[key]), key, this.test, event);
        }
        this.handleSearch(obj[key], next);
      }
    });
  };

  componentDidMount() {
    axios.get("https://www.ifixit.com/api/2.0/categories").then(response => {
      this.setState({ categories: response.data });
    });
  }

  render() {
    return (
      <React.Fragment>
        {/* display list of things */}
        <div className="columns is-multiline">
          {Object.keys(this.state.categories).map(key => (
            <div className="column is-4">
              <div
                onClick={event =>
                  this.handleSearch(this.state.categories, key, event)
                }
              >
                {key}
              </div>
              <div name={key + "1"} />
            </div>
          ))}
        </div>
      </React.Fragment>
    );
  }
}

这里是 createData 的代码，它创建下一级数据并且应该创建它，以便可以单击这些元素以显示下一级

var index = 1;
export function createData(data, key, search, e) {
  e.stopPropagation();
  let parent = document.getElementsByName(key + "1");

  //create elements and append them
  for (let i = 0; i < data.length; i++) {
    let wrapper = document.createElement("ul");
    wrapper.innerHTML = data[i];
    wrapper.name = data[i] + index + 1;
    wrapper.addEventListener("click", search(data[i]));
    parent[0].append(wrapper);
  }
}

这是控制台中“类别”的屏幕截图（对象中的对象中的对象）

标签： javascriptjsonreactjsapiobject

如果可能的话，你应该尽量避免通过使用 vanilla JS 创建/附加元素来操作 DOM，同时使用 React，它的主要优势之一是虚拟 DOM，它可以为你管理渲染并避免冲突。

不确定您要渲染的对象有多深，但由于数据的复杂性，这将是使用另一个组件来模块化事物并避免您现在处理的混乱的好案例。

假设所有子对象的结构都相同，您可以创建一个基于对象键递归呈现自身的组件。这个答案应该会有所帮助。

javascript - 使用 API json 对象设置动态菜单？

问题描述

解决方案

推荐阅读