时间戳

首页 > 解决方案 > 如何将地图索引传递给由jsx元素组成的数组项？

javascript - 如何将地图索引传递给由jsx元素组成的数组项？

问题描述

我有这段代码，我无法传递数组项映射的键索引。

arrayItem = [function1, function2, function3]

<div>
   {arrayItem.map((item, index) => (<Box key={index}>{item}</Box>}
</div>

前任。对于功能1

const function1 = (index) => { <div> <h1> test</h1> <Button onClick((index) => console.log(index,"array number")}

当它转到function1时，我似乎无法从地图中检索索引。根据地图中控制台的索引是数字，但是当它转到函数时，它是一个className {}. 这样做的目的是检索数组的编号，以便我可以将按钮删除并根据索引删除特定的数组。顺便说一句，arrayItems 不是静态的，所以它可以有多个功能。

谢谢您的帮助。

标签： javascriptarraysreactjs

解决方案

如果您认为您的项目只是普通函数，您可以将index其作为参数传递给这些函数，然后像这样调用它们

<div>
   {arrayItem.map((item, index) => (<Box key={index}>{item(index)}</Box>))}
</div>

你的功能也有一些错误，你需要从中得到return一些jsx。你有一个错字onClick((...。试试这个：

const function1 = (index) => {
  return (
    <div>
      <h1> test</h1>
      <Button onClick={(index) => console.log(index, "array number")}>click me</Button>
    </div>
  );
};

还有另一个场景，您认为您arrayItem的数组是React Function Component. 在这种情况下，您需要将代码更改为此并index作为道具传递：

<div>
   {arrayItem.map((FunctionComponent, index) => (<Box key={index}><FunctionComponent index={index} /></Box>))}
</div>

然后使用index这样的：

const function1 = ({index}) => {
  return (
    <div>
      <h1> test</h1>
      <Button onClick={(index) => console.log(index, "array number")}>click me</Button>
    </div>
  );
};

推荐阅读