Question

我正在尝试在菜单中具有子项的每个项目旁边添加一个FontAwesome箭头（即，我想表明您可以单击该元素以显示该类别中的更多数据）。菜单中填充了来自API的json数据，并且由于嵌套的对象太多，因此我决定使用递归来使其正常工作。但是现在我很难将箭头仅添加到其中包含更多数据的元素上，而不是菜单中的每个单独元素上。

有人知道如何更改它，以便箭头仅显示在需要它的元素旁边吗？参见下面的图片

class Menu extends React.Component {
  state = {
    devices: [],
    objectKey: null,
    tempKey: []
  };

这是我当前添加箭头的地方...

  createMenuLevels = level => {
    const { objectKey } = this.state;
    const levelKeys = Object.entries(level).map(([key, value]) => {
      return (
        <ul key={key}>
          <div onClick={() => this.handleDisplayNextLevel(key)}>{key} <FontAwesome name="angle-right"/> </div>
          {objectKey[key] && this.createMenuLevels(value)}
        </ul>
      );
    });
    return <div>{levelKeys}</div>;
  };

  handleDisplayNextLevel = key => {
    this.setState(prevState => ({
      objectKey: {
        ...prevState.objectKey,
        [key]: !this.state.objectKey[key]
      }
    }));
  };

  initializeTK = level => {
    Object.entries(level).map(([key, value]) => {
      const newTemp = this.state.tempKey;
      newTemp.push(key);
      this.setState({ tempKey: newTemp });
      this.initializeTK(value);
    });
  };

  initializeOK = () => {
    const { tempKey } = this.state;
    let tempObject = {};
    tempKey.forEach(tempKey => {
      tempObject[tempKey] = true;
    });

    this.setState({ objectKey: tempObject });
  };

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

  render() {
    const { devices } = this.state;
    return <div>{this.createMenuLevels(devices)}</div>;
  }
}

这是现在的样子，但是我希望它像领带和雨伞这样的项目没有箭头，因为这些项目中没有要显示的数据

Answer 1

您可以从createMenuLevels的map循环中检查该值是否为空，然后根据该信息构造div。

Array.isArray(value)

您不仅可以检查该值是否已设置，还可以检查它是否是包含以下内容的数组：{{1}}

如何在有孩子的菜单元素中添加箭头？

1 个答案: