Javascript 如何创建一个在react中呈现多个图像的图像类

对不起，我的英语不好，我也是个新手（昨天刚开始）

但是我想知道我们如何渲染数量可变的图像，就像我用一个数组指定它应该渲染所有图像的文件名来指定图像的数量一样

就像那里有一个

array = ["1.jpg", "2.jpg", "3.jpg"]
arrLen = array.length

render(
<MultipleImage 
    noOfImage = { arrLen}
    fileName = arrayOfFileNames
/>
);

数组=[“1.jpg”、“2.jpg”、“3.jpg”]
arrLen=array.length
渲染(
);

您可以使用来映射阵列并渲染图像

在这个例子中，我用它来模拟源代码

最好创建一个新的图像组件，以便再次使用

function Image({ fileName }) {
  return (
    <img  src={fileName}/>
  )
}

function App() {
  const array = ["1.jpg", "2.jpg", "3.jpg"]
  render(
    <>
      {
        array.map( image => {
          return (
            <Image fileName = { image }/>
          )
        })
      }
    </>
  );
}

函数映像（{fileName}）{
返回(
)
}
函数App（）{
常量数组=[“1.jpg”、“2.jpg”、“3.jpg”]
渲染(
{
array.map（image=>{
返回(
)
})
}
);
}

您可以使用map（）方法迭代图像数组。 在本例中，我将images[]数组作为道具传递给Image List组件，In Image List组件使用map方法对所有图像进行排序

App.js组件

class App extends React.Component {

    state = {
        images: ["1.jpg", "2.jpg", "3.jpg"]
    }

  render() {
    return (
      <div className="ui container" style={{ marginTop: "1rem" }}>
        <ImageList images={this.state.images}/>
      </div>
    );
  }
}

const ImageList = (props) => {

    const images = props.images.map((image) => {
        return <img src={image} alt={image} />
    });
   return <div className="image-list">{images}</div>

}

类应用程序扩展了React.Component{
状态={
图片：[“1.jpg”、“2.jpg”、“3.jpg”]
}
render（）{
返回(
);
}
}

图像列表组件

class App extends React.Component {

    state = {
        images: ["1.jpg", "2.jpg", "3.jpg"]
    }

  render() {
    return (
      <div className="ui container" style={{ marginTop: "1rem" }}>
        <ImageList images={this.state.images}/>
      </div>
    );
  }
}

const ImageList = (props) => {

    const images = props.images.map((image) => {
        return <img src={image} alt={image} />
    });
   return <div className="image-list">{images}</div>

}

const ImageList=（道具）=>{
const images=props.images.map（（图像）=>{
返回
});
返回{images}
}

您可以使用array map（）方法循环图像源数组，并通过props将数组的单个元素传递给react组件。这里有一个例子。 注意：“您应该了解map（），以及如何在组件中传递道具”

功能图像（道具）{
返回(
)
}
函数App（）{
const images=[“1.jpg”、“2.jpg”、“3.jpg”]
渲染(
{
images.map（img=>
(
)
}
);
}

虽然此代码可能提供问题的解决方案，但最好添加其工作原因/方式的上下文。这可以帮助未来用户学习并最终将这些知识应用到他们自己的代码中。在解释代码时，用户也可能会给予积极的反馈/支持。