Question

我有一个父组件，它将通过在每个元素上运行带有数组的数组来创建子组件。在每个元素中，我都会使用一个称为徽标的变量来表示图像的路径，方法是：

    ```jsx    
Premio : [
    {key:11, name:'EMPTY', premio:0, logo:ruta1, special:"EMPTY"},
    {key:12, name:'BONUS', premio:1, logo:ruta2, special:"BONUS"},

在一般情况下，这会驱动Redux，到目前为止还可以

我的组件在打印所有奖品名称时都没有问题，因为我将所有列表保存在变量中，以便以后在渲染器中显示出来：

    ```jsx
premioCopia = this.props.Premio
listadoDePremios = premioCopia.map(task => task.name)

我的问题是当我要一个接一个显示图像时。我尝试使用地图并使用从道具获取路线的子组件（正常工作）来完成此任务。我的孩子奖：

    ```jsx
    class Premio extends Component {
  constructor(props){
    super(props)
  }
  render() {
  return(  <img src={this.props.img} />)
    }
  }

我尝试从父类，返回的函数中以这种方式进行操作：

    ```jsx
arrayPremios(premioCopia){
  <div>
      {premioCopia.map((element, key) =>
          <Premio key={key} src={element.logo} />
      )}
  </div>
}

给我编译错误：

我也尝试过

    ```jsx
arrayPremios(premioCopia){
premioCopia.forEach(function(logo) {
<Premio src={premioCopia.logo} />
}
)}

什么都不是，：（

Answer 1

当您说它给出了编译错误时，最好知道该错误以帮助解决问题。但是，我确实注意到您引用的是错误的道具

您将src传递给组件，但是尝试使用键img来访问源

<Premio key={key} src={element.logo} />

所以在这里换个合适的道具

class Premio extends Component {
  constructor(props){
    super(props)
  }
  render() {
    return
      <img src={this.props.src} />
  }
}

又将<img src={this.props.img} />更改为<img src={this.props.src} />

编辑

您需要从函数中返回。

arrayPremios(premioCopia){
  return (
    <div>
      {premioCopia.map((element, key) =>
          <Premio key={key} src={element.logo} />
      )}
    </div>
  )
}

通过在Reactjs上运行数组来创建组件

1 个答案:

编辑