reactjs - 动态填充第二/第三级嵌套手风琴
问题描述
我需要填充第二和第三层嵌套手风琴(来自语义-ui-react),这就是我尝试实现它的方式:
let lvl1Items = [];
let lvl2Items = [];
let lvl1Content;
let lvl2Content;
function handleOnItemTitleClickedLevel1(e, itemProps) {
//console.log("======>", e.currentTarget.textContent);
//let selected = e.currentTarget.textContent;
console.log(itemProps.index);
const index = itemProps.index;
lvl2Items = [];
elementsLevel2.forEach(function(item) {
lvl2Items.push(
{key: item.Name, title: item.Name, content: ''}
)
});
lvl1Content = (
<div>
<Accordion.Accordion panels={lvl2Items} onTitleClick={handleOnItemTitleClickedLevel2} />
</div>
)
//this.state.lvl1Items.forEach( (item) => item.key === selected ?
item.content = {content : this.state.lvl2Items})
lvl1Items[index].content = {content : lvl1Content};
}
function handleOnItemTitleClickedLevel2(e, itemProps) {
console.log(itemProps.index);
const index = itemProps.index;
const lvl3Items = [];
elementsLevel3.forEach(function(item) {
lvl3Items.push(
{key: item.Name, title: item.Name, content: ''}
)
});
console.log(lvl3Items);
lvl2Content = (
<div>
<Accordion.Accordio panels={lvl3Items} />
</div>
)
lvl2Items[index].content = {content : lvl2Content};
}
class ProjectCustomize extends Component {
state = {
//activeIndex: 0,
// lvl1Items : [],
// lvl2Items : [],
// lvl3Items : []
}
componentDidMount() {
lvl1Items = [];
elementsLevel1.forEach(function(item) {
lvl1Items.push(
{key: item.Name, title: item.Name, content: lvl1Content}
)
});
}
render() {
//const { lvl1Items, lvl2Items, lvl3Items } = this.state;
//const lvl1Items = [];
// const lvl2Items = [];
// const lvl3Items = [];
return (
<Tabs>
<Tab label="Quantities">
{/*<Accordion>*/}
{/* {lvl1Items}*/}
{/*</Accordion>*/}
<Accordion /*defaultActiveIndex={0}*/ /*activeIndex={activeIndex}*/ panels={lvl1Items} styled onTitleClick={this.handleOnItemTitleClickedLevel1} />
</Tab>
</Tabs>
);
}
}
我是新来的反应,这是正确的方法吗?也许使用状态而不是全局变量?..................................................... ..................................................... ..................................................... ……
解决方案
推荐阅读
- javascript - 如何从
当值更改为其各自的标签时 | 验证 - sql - 将来自多个实体的数据存档在一个表中并形成报告的最佳实践
- django - Django - 如何使用视图执行删除对象
- python - 为什么相同的python re模式正则表达式在单行中有效,但在多行中无效
- c# - C#:用于 ASP.NET MVC 应用程序的实体框架 6.2
- angular - 如何使用 Angular 8 更新桌面上的 PWA 主屏幕图标
- c# - 我正在尝试使用 Skip Take in Code Frist Approach 进行分页但给出错误
- python-3.x - 每当输入框为空时显示 MessageBox 错误
- python-3.x - os.startfile 奇怪的行为
- react-native - TouchableOpacity:为什么没有触发onPress,却触发了onLongPress?