在 React.js 中，如何循环遍历 jsx 元素数组并向它们添加属性答案

【问题标题】：In React.js, how can I loop through an array of jsx elements and add attributes to them在 React.js 中，如何循环遍历 jsx 元素数组并向它们添加属性
【发布时间】：2021-10-09 02:52:06
【问题描述】：

class TileImages extends React.Component {
    render() {      
        return (
            <div className="layout">
                <img src={airConditioning} key="air conditioning"  alt="air conditioning" />,
                <img src={avacado} key="avacado" alt="avacado" />,
                <img src={airplane} key="airplane" alt="airplane" />,
                <img src={clothes} key="new clothes" alt="new clothes" />
            </div>
        )
    }
}

所以如果我想为每个<img> 标签添加一个“onClick”事件监听器，我该怎么做呢？使用常规 javascript 会更好吗？此外，为每个 <img> 创建单独的 React 组件是否更好，因为它们每个都有自己的属性并且必须按照其他图像的行为？

我对 React 比较陌生，并且是 Web 开发的业余爱好者，所以如果我的代码和问题没有意义，请多多包涵……

顺便说一句- 如果有人有任何提示，这是整个代码文件

import React from 'react'

//images
import airConditioning from './images/tiles_0.png'
import avacado from './images/tiles_1.png'
import airplane from './images/tiles_2.png'
import clothes from './images/tiles_3.png'

//CSS styling
import './Images.css'


// const imagesArray = [
//     <img src={airConditioning} key="air conditioning"  alt="air conditioning" />,
//     <img src={avacado} key="avacado" alt="avacado" />,
//     <img src={airplane} key="airplane" alt="airplane" />,
//     <img src={clothes} key="new clothes" alt="new clothes" />
// ]


export class HomePage extends React.Component {
  render() {
    return (
        <div>
            <h1>Lifestyle</h1>
            <br />
            <TileImages />
        </div>
    )
  }
}




class TileImages extends React.Component {
    render() {      
        return (
            <div className="layout">
                <img src={airConditioning} key="air conditioning"  alt="air conditioning" />,
                <img src={avacado} key="avacado" alt="avacado" />,
                <img src={airplane} key="airplane" alt="airplane" />,
                <img src={clothes} key="new clothes" alt="new clothes" />
            </div>
        )
    }
}



//add classes to react to onClick the image tiles using "react --patterns--"

【问题讨论】：

您不需要循环访问它们，您可以将 onclick 添加为属性，onclick={function}。您还可以将单个 onclick 处理程序添加到父 div 并检查 event.currentTarget 以获取点击图像
它是 React，所以您至少是指 onClick，但是将这些图像转换为返回 Object.entries().map 的“字典”会更简洁，更易于维护.

标签： javascript html reactjs jsx backend

【解决方案1】：

将图像添加到数组中，遍历数组，对于每个项目，如果您想要动态解决方案，您可以使用单击功能返回图像

如果您不在乎，只需手动添加点击到每张图片

【讨论】：

【解决方案2】：

如果你的操作都是一样的，你可以做这样的事情，给 onClick 添加一个默认函数

const imageProps = [
  { src: airConditioning, key: "air conditioning",  alt: "air conditioning"},
  { src: avacado, key: "avacado", alt: "avacado"},
  { src: airplane, key: "airplane", alt: "airplane"},
  { src: clothes, key: "new clothes", alt: "new clothes"}
]

const onAction = (ev) => {
  // do something 
}

const InteractiveImage = (props) => <img  onClick={onAction} {...props} />

const TileImages = () => 
  <div className="layout">
    {imageProps.map((inputProps) => <InteractiveImage {...inputProps} />)}
  </div>

如果您希望保持相同的书写格式，您可以保留语法，但仍将 onclick 函数设置为默认值，直到将其传递给组件，该组件将覆盖：

const TileImages = () => 
  <div className="layout">
    <InteractiveImage src={airConditioning} key="air conditioning"  alt="air conditioning" />,
    <InteractiveImage src={avacado} key="avacado" alt="avacado" />,
    <InteractiveImage src={airplane} key="airplane" alt="airplane" />,
    <InteractiveImage src={clothes} key="new clothes" alt="new clothes" />
  </div>

【讨论】：