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

Question

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 的新手，也是网络开发的业余爱好者，所以如果我的代码和问题没有意义，请多多包涵...

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

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--"

Answer 1

将图像添加到数组中，遍历数组，对于每个项目，您可以 return 具有点击功能的图像，如果您想要动态解决方案

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

Answer 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>

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

In React.js, how can I loop through an array of jsx elements and add attributes to them

html

javascript

backend

jsx

reactjs