如何在React子节点中发送和访问map索引?

Question

从API获取数组后，我使用该数据使用子组件构建一个表:

<tbody>
{data.map((item, index) => (
<Row key={index} item={item} deleteMe={deleteChild}/>
))}
</tbody>

如何在Row组件中使用上述索引?子进程像这样使用数组数据:

return (
<tr>
<td>**Here should be the index**</td>
<td>{item.exerciseName}</td>
<td>{item.instructions}</td>
</tr>
);

谢谢你所有的回答，设法用你的建议显示索引。

Answer 1

您可以将索引作为单独的prop传递。

{data.map((item, index) => (
<Row key={index} item={item} index={index} deleteMe={deleteChild}/>
))}

则可以在Row组件内部直接访问。

function Row({item, index}) {
return (
<tr>
<td>{index}</td>
<td>{item.exerciseName}</td>
<td>{item.instructions}</td>
</tr>
);
}

工作的例子:

function Row({item, index}) {
return (
<tr>
<td>{index}</td>
<td>{item.exerciseName}</td>
<td>{item.instructions}</td>
</tr>
);
}
function App() {
const data = [{exerciseName: 'Name 1', instructions: 'Instructions 1'}, {exerciseName: 'Exercise 2', instructions: 'Instructions 2'}];
return (
<table>
<tbody>
{data.map((item, index) => (
<Row key={index} item={item} index={index}/>
))}
</tbody>
</table>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);

table, td {
border: 1px solid;
border-collapse: collapse;
padding: 5px;
}

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 2

key属性是由React在底层使用的，不公开给你。你必须创建另一个传递给子元素的道具，并在你喜欢的时候访问它。

Answer 3

你可以使用props来实现，

<Row key={index} item={item} deleteMe={deleteChild} index={index}/>

在子组件中你可以通过props.index

使用它

return (
<tr>
<td>{props.index}</td>
<td>{item.exerciseName}</td>
<td>{item.instructions}</td>
</tr>
);