React MaterialUI-ExpansionPanelSummary-向div ID添加计数器

Question

我需要一种可以在调用 render函数时向div id添加计数器的功能。目的是拥有唯一的div。

这是我的渲染功能-

render() {

    return (
        <div className={classes.root}>
            {
                someFunction.map(output => {
                    return (
                        <div>
                            <ExpansionPanel key={output.someKey} defaultExpanded={shouldExpand}>
                                <ExpansionPanelSummary expandIcon={<ExpandMoreIcon/>} >
                                    <div id="Kirti">
                                        <span>{output.someKey}</span>
                                        <span>"SomeText"</span>
                                    </div>
                                </ExpansionPanelSummary>
                                <ExpansionPanelDetails>
                                    <div> 
                                        {"Some Detail"}
                                    </div>
                                </ExpansionPanelDetails>
                            </ExpansionPanel>
                        </div>
                    )
                })
            }
        </div>
    )
}

我需要向div id =“ Kirti”添加一个计数器。像

1. int计数= 0;
2. 调用渲染功能。
3. <div id=("Kirti"+count)>
4. 计数++

由于我可以有多个div（以“ Kirti”开头），所以我需要通过添加此计数器来使它们唯一。

如果需要更多信息以更好地了解此问题，请告诉我。

任何建议将不胜感激。

Answer 1

map函数具有传递给函数回调的索引/计数器。

所以您要做的是：

{someFunction.map((output, index) =>
  <ExpansionPanel key={output.someKey} id={`panel-${index}`}>
    // more components here...
  </ExpansionPanel>
)}