Question

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

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

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

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

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}。

Answer 2

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

import React from 'react'
import styles from './styles.css'

export default class ColumnComponent extends React.Component {
  render() {
    return (
      <img className="" src={this.props.imgURL} />
    )
  }
}

// Usage
<ColumnComponent imgURL={"http://www.google.it"} />
<ColumnComponent imgURL={"http://www.youtube.com"} />
<ColumnComponent imgURL={"http://www.vk.ru"} />

Answer 3

这就是您需要的

您可以将具有 props 的图像列表传递给ColumnComponent并使用 map 遍历和创建元素，然后在渲染中使用它>。

然后假设您的元素（在下面的示例中被称为el）由属性image_url组成，您可以通过在 img中执行image_url来引用el["image_url"]属性src 组件

，因此您只需要在 index.js

中使用一次 ColumnComponent

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}
    )
  }
}

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

3 个答案: