我是 Javascript/React 新手,所以我不确定如何将其实现到我的递归函数中。我设置了一个 json 对象的嵌套菜单,并且想要添加小箭头来指示是否有另一个级别可以单击。由于我的菜单由大量嵌套的 json 对象组成,因此我使用递归来遍历所有对象并将它们呈现为菜单。我将提供屏幕截图来直观地解释我正在尝试做的事情。
有谁知道如何检查该层对象是否有子对象,如果有,添加一个箭头(或任何东西)来指示这一点?
这是我的代码:
class Menu extends React.Component {
state = {
categories: [],
objectKeys: null,
tempKeys: []
};
makeMenuLayer = layer => {
const { objectKeys } = this.state;
const layerKeys = Object.entries(layer).map(([key, value], index) => {
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>;
}
}
这是它目前的样子,我希望任何包含更多元素的元素都有一个箭头或其他东西来显示有更多的数据嵌套(因此,服装、配饰、服装等都会有箭头) :
这是我想要的类型的示例:
None
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)