Reactjs 我们可以添加Html id来响应代码并生成条件吗

我有一个数组，这里我想根据span id的

let wheelIndex = 1
finalarray.forEach((wheel) => {
        axles.push(
          <div className='twoaxlewheels'>
          <span className='infotype' id={wheelIndex}>
            {wheel.wheel==id && wheel.sub_item?wheel.pressure:'defaultvalue'}
          </span>
          <span className='infotype' id={wheelIndex+1}>-</span>
        </div>
        )
    })

let wheelIndex=1
finalarray.forEach（（轮）=>{
推(
          
          
{wheel.wheel==id&&wheel.sub_项？wheel.pressure:'defaultvalue'}
          
          -
        
        )
    })

---

当我运行这段代码时，它抛出的id是未定义的。是否有一种方法将span id链接到条件

这就是在javascript中使用Array.forEach中的索引的方式，但我不确定wheel.wheel==id的用途。此外，您还需要为react to outer div添加一个键

finalarray.forEach((wheel, wheelIndex) => {
        axles.push(
          <div key={wheelIndex} className='twoaxlewheels'>
          <span className='infotype' id={wheelIndex}>
            {wheel.wheel==wheelIndex && wheel.sub_item?wheel.pressure:'defaultvalue'}
          </span>
          <span className='infotype' id={wheelIndex}>-</span>
        </div>
        )
    })

finalarray.forEach（（车轮，车轮索引）=>{
推(
{wheel.wheel==wheelIndex和wheel.sub_项？wheel.pressure:'defaultvalue'}
-
)
})

当然有。当您使用forEach时，您不必自己跟踪索引，forEach为您提供了灵活性

let wheelIndex = 1
finalarray.forEach((wheel, index) => { // index here
        // you can also define an id here like this
        const id = wheelIndex;
        axles.push(
          <div className='twoaxlewheels'>
          <span className='infotype' id={id}> // use defined id here 
            {wheel.wheel===index && wheel.sub_item?wheel.pressure:'defaultvalue'}
          </span>
          <span className='infotype' id={wheelIndex+1}>-</span>
        </div>
        )
    })

let wheelIndex=1
finalarray.forEach（（轮子，索引）=>{//此处索引
//您也可以在这里像这样定义一个id
const id=车轮索引；
推(
//在此处使用定义的id
{wheel.wheel===索引和wheel.sub_项？wheel.pressure:'defaultvalue'}
-
)
})

---

此外，还应使用===进行相等比较，以检查值和类型。

如果要将数据推送到新数组，我建议您改用

.map（）

const axles = finalarray.map((wheel, index) => {
        return (
          <div className='twoaxlewheels'>
          <span className="infotype" id={index}> // use defined id here 
            {wheel.wheel===index && wheel.sub_item ? wheel.pressure :'defaultvalue'}
          </span>
          <span className="infotype" id={index}>-</span>
        </div>
        )
    });

const axes=finalarray.map（（车轮，索引）=>{
返回(
//在此处使用定义的id
{wheel.wheel===索引和wheel.sub_项？wheel.pressure:'defaultvalue'}
-
)
});

---

您可以填充（并呈现）变量（数组）

您不能提供以数字开头的

id

。因此，您需要在id的开头添加

字符串

finalarray.forEach((wheel,wheelIndex) => {
    axles.push(
      <div className='twoaxlewheels'>
      <span className='infotype' id={`wheel_${wheelIndex}`}>
        {wheel.wheel==id && wheel.sub_item?wheel.pressure:'defaultvalue'}
      </span>
      <span className='infotype' id={`wheel_${wheelIndex}`}>-</span>
    </div>
    )
})

finalarray.forEach（（车轮，车轮索引）=>{
推(
{wheel.wheel==id&&wheel.sub_项？wheel.pressure:'defaultvalue'}
-
)
})

我建议您使用

.map（）