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

Question

我有一个组件想要引用不同的图像，但我不想专门为每个图像创建一个新组件。我的代码如下:

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

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

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

Answer 1

我认为这就是您正在寻找的。

 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;

在 ColumnComponent 中，请确保 src={this.props.imgURL}如果您使用类组件。