如何向有子项的菜单元素添加箭头？

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 检查地图循环中的值是否为空，并根据该信息构建 div。

createMenuLevels = level => {
const { objectKey } = this.state;
const levelKeys = Object.entries(level).map(([key, value]) => {
//check here if childs are included:
var arrow = value ? "<FontAwesome name='angle-right'/>" : "";
return (
    <ul key={key}>
      <div onClick={() => this.handleDisplayNextLevel(key)}>{key} {arrow} </div>
      {objectKey[key] && this.createMenuLevels(value)}
    </ul>
  );
});
return <div>{levelKeys}</div>;
};

除了检查值是否已设置之外，您还可以检查它是否是一个数组：Array.isArray(value)

如何向有子项的菜单元素添加箭头？

How to add an arrow to menu elements that have children?

javascript

recursion

menu

reactjs