Javascript 使用一个具有不同图像的组件？

我有一个组件，我想引用不同的图像，但我不想专门为每个图像创建一个新组件。我的守则如下：

import React from 'react'
import styles from './styles.css'

export default class ColumnComponent extends React.Component {
  render() {
    return (
      <img className="" src={imgURL} />
    )
  }
}

从“React”导入React
从“./styles.css”导入样式
导出默认类ColumnComponent扩展React.Component{
render（）{
返回(
)
}
}

---

我如何才能导出这一个组件，使src={imgURL}在index.js中使用时引用不同的图像，例如？

您似乎是新手，这可以通过简单的方法解决：

从“React”导入React
从“./styles.css”导入样式
导出默认类ColumnComponent扩展React.Component{
render（）{
返回(
)
}
}
//用法

看来你是个新手，这可以通过简单的道具解决：

从“React”导入React
从“./styles.css”导入样式
导出默认类ColumnComponent扩展React.Component{
render（）{
返回(
)
}
}
//用法

这就是您需要的

您可以将具有道具的图像列表传递给ColumnComponent，并使用贴图循环并创建元素，然后在渲染中使用它

然后假设您的元素（在下面的示例中被引用为el）由属性

image\u url

组成，您只需在img src组件中执行

el[“image\u url”]

即可引用

image\u url

属性

因此，只需在index.js中使用ColumnComponent一次即可

列组件

import React from 'react'
import styles from './styles.css'

export default class ColumnComponent extends React.Component {
 const images = this.props.imgURLs.map(el => {
   return  <img className="" src={el["image_url"]} />
 });  

  render() {
    return (
      {images}
    )
  }
}

从“React”导入React
从“./styles.css”导入样式
导出默认类ColumnComponent扩展React.Component{
const images=this.props.imgURLs.map（el=>{
返回
});  
render（）{
返回(
{图像}
)
}
}

这就是您需要的

您可以将具有道具的图像列表传递给ColumnComponent，并使用贴图循环并创建元素，然后在渲染中使用它

然后假设您的元素（在下面的示例中被引用为el）由属性

image\u url

组成，您只需在img src组件中执行

el[“image\u url”]

即可引用

image\u url

属性

因此，只需在index.js中使用ColumnComponent一次即可

列组件

import React from 'react'
import styles from './styles.css'

export default class ColumnComponent extends React.Component {
 const images = this.props.imgURLs.map(el => {
   return  <img className="" src={el["image_url"]} />
 });  

  render() {
    return (
      {images}
    )
  }
}

从“React”导入React
从“./styles.css”导入样式
导出默认类ColumnComponent扩展React.Component{
const images=this.props.imgURLs.map（el=>{
返回
});  
render（）{
返回(
{图像}
)
}
}

我想这就是你要找的

 import React,{Component} from 'react';
 import ColumnComponent from './ColumnComponent'
    class Index extends Component {
       state={
         images:[
         {id:'1',img:'www.google.com'},
         {id:'2',img:'www.facebook.com'},
         {id:'3',img:'www.youtube.com'},
            ]
         }
       render(){
        let myImages=this.state.images.map(
              el=>{
                  return <ColumnComponent key={el.id} imgURL={el.img} />})
         return (
           <div>
            {myImages}
           </div>
        )}
    }
       export default Index;

import React，{Component}来自'React'；
从“./ColumnPonent”导入ColumnPonent
类索引扩展组件{
陈述={
图像：[
{id:'1'，img:'www.google.com'}，
{id:'2'，img:'www.facebook.com'}，
{id:'3'，img:'www.youtube.com'}，
]
}
render（）{
让myImages=this.state.images.map(
el=>{
返回}）
返回(
{myImages}
)}
}
出口违约指数；

---

在ColumnComponent中，如果您使用class component，请确保

src={this.props.imgURL}

。

我想这就是您要找的

 import React,{Component} from 'react';
 import ColumnComponent from './ColumnComponent'
    class Index extends Component {
       state={
         images:[
         {id:'1',img:'www.google.com'},
         {id:'2',img:'www.facebook.com'},
         {id:'3',img:'www.youtube.com'},
            ]
         }
       render(){
        let myImages=this.state.images.map(
              el=>{
                  return <ColumnComponent key={el.id} imgURL={el.img} />})
         return (
           <div>
            {myImages}
           </div>
        )}
    }
       export default Index;

import React，{Component}来自'React'；
从“./ColumnPonent”导入ColumnPonent
类索引扩展组件{
陈述={
图像：[
{id:'1'，img:'www.google.com'}，
{id:'2'，img:'www.facebook.com'}，
{id:'3'，img:'www.youtube.com'}，
]
}
render（）{
让myImages=this.state.images.map(
el=>{
返回}）
返回(
{myImages}
)}
}
出口违约指数；

---

---

在ColumnComponent中，如果您使用类组件，请确保

src={this.props.imgURL}

。

谢谢，但是如果我想在index.js中多次使用ColumnComponent，这如何解决问题呢。imgURL不总是等于{“”}吗？不。我已经更新了代码段。imgUrl可以包含任何值、简单字符串或一个变量。谢谢，但是如何知道哪个imgUrl应该在ColumnComponent中使用？为什么要为React创建JS代码段？@jnowB取决于您访问数据的方式。组件保持不变。谢谢，但是如果我想在index.js中多次使用ColumnComponent，这如何解决问题呢。imgURL不总是等于{“”}吗？不。我已经更新了代码段。imgUrl可以包含任何值、简单字符串或一个变量。谢谢，但是如何知道哪个imgUrl应该在ColumnComponent中使用？为什么要为React创建JS代码段？@jnowB取决于您访问数据的方式。组件保持不变。您的意思是您有index.js中的图像列表，要使用ColumnComponent吗？我想引用不同的图像是什么意思？这就是我的意思？你是说你有一个index.js中的图像列表，你想使用ColumnComponent？我想引用不同的图像是什么意思？我想这里有一个错误，因为图像是一个数组，如果你喜欢这个chrome会给你一个错误。有两种方法可以解决这个问题。首先，{images}变成[图像]；第二，{images}变成了{images}编辑了这篇文章，可能解决了这个问题。等待praveen对其进行审查/改进。是的@kuchBhi感谢您的编辑，我批准了编辑。我认为这里有一个错误，因为图像是一个数组，如果您喜欢这个chrome，它会给您带来一个错误。有两种方法可以用来