Question

我是Java和React的新手，所以如果这是一个愚蠢的问题，请原谅。我创建了此嵌套json对象菜单，因为我希望用户能够单击放入“包”中的项目。我希望菜单中唯一可单击的项目是嵌套对象的最后一个，但是我不确定100％如何设置onClick函数以仅用于“最后一个”项目。因此，基本上，如果它不再有子级，则使其可单击。我还将包括我想要完成的屏幕截图。有人对如何做到这一点有想法吗？

这是呈现菜单的我的代码

class Menu extends React.Component {
  state = {
    categories: [],
    objectKeys: null,
    tempKeys: []
  };

  makeMenuLayer = layer => {
    const { objectKeys } = this.state;
    const layerKeys = Object.entries(layer).map(([key, value]) => {
      return (
        <ul key={key}>
          <div onClick={() => this.handleShowMore(key)}>{key}</div>
          {objectKeys[key] && this.makeMenuLayer(value)}
        </ul>
      );
    });
    return <div>{layerKeys}</div>;
  };

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

  initializeTempKeys = layer => {
    Object.entries(layer).map(([key, value]) => {
      const newTempKeys = this.state.tempKeys;
      newTempKeys.push(key);
      this.setState({ tempKeys: newTempKeys });
      this.initializeTempKeys(value);
    });
  };

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

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

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

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

这是我的菜单，其中某些部分已打开。因此请澄清一下，我希望“领带”和“伞”以及“巴塔哥尼亚服装”和“ VAUDEBekleidungsstück”都是可点击的，但不要“ Tops”，因为那仍然有孩子。

这是我正在使用的json数据（当它是console.log时）

Answer 1

如果您用索引映射条目，则可以使用它来检测最后一个条目： Object.entries(layer).map(([key, value], index) =>...

然后对于要渲染的组件： onClick={index === Object.entries(layer).length - 1 && () => this.handleShowMore(key)}

JavaScript将读取&&之前的第一条语句，如果返回true，它将评估下一条。如果返回false，则不会继续执行下一个操作。因此，您的功能只会分配给对象中的最后一个条目。

如何使嵌套菜单的最后一个元素可点击？

1 个答案: