React：如何将数组作为道具传递并渲染图像列表？答案

【问题标题】：React: How to pass an array as props and render a list of images?React：如何将数组作为道具传递并渲染图像列表？
【发布时间】：2020-03-26 23:51:16
【问题描述】：

我是新来的反应。我想循环图像列表（Json）并在屏幕上显示这些图像。所以我想用数组创建一个道具。但我不知道如何将 Array 作为道具传递？你能帮忙看看吗？

var images = [
  "./resources/bgdefault.jpg",
  "./resources/bg1.jpg",
  "./resources/bg2.jpg",
  "./resources/bg3.jpg",
  "./resources/bg4.jpg",
  "./resources/bg5.jpg",
  "./resources/bg6.jpg",
  "./resources/bg7.jpg",
  "./resources/bg8.jpg"
];

type State = {
  index: number;
};

type Props = {
  backgroundDuration: number;
  imagePath: Array<string>;
};

export class BackgroundImage extends React.Component<Props, State> {
  timerID: number;

  constructor(props: Props) {
    super(props);
    this.state = {
      index: -1
    };
    this.timerID=0;
  }

.....

  render() {
    const path:string = images[this.state.index];
    return (
      <div
        style={{
          width: "100%",
          height: "100%",
          backgroundSize: "cover",
          backgroundImage: `url(${path})`
        }}
      ></div>
    );
  }
}

【问题讨论】：

请参考这个它已经被asnwered - stackoverflow.com/questions/31883601/…
这能回答你的问题吗？ passings array as props in reactjs

标签： javascript reactjs typescript frontend

【解决方案1】：

您可以将任何 javascript 变量传递给 prop。例如，如果你想遍历一个 array 的 URL 并为每个 URL 呈现一个 img 标签：

// ImageList.js file

function ImageList (props) {
  const { images } = props

  return <div>{ images.map(imgUrl => <img src={imgUrl} />) }</div>
}

在父组件中你会有类似的东西：

// App.js file

import ImageList from './ImageList'

function App () {
  const images = [
    "./resources/bgdefault.jpg",
    "./resources/bg1.jpg",
    "./resources/bg2.jpg",
    "./resources/bg3.jpg",
    "./resources/bg4.jpg",
    "./resources/bg5.jpg",
    "./resources/bg6.jpg",
    "./resources/bg7.jpg",
    "./resources/bg8.jpg"
  ]

  return <ImageList images={images} />
}

此示例使用 function 组件，但 props 和 JSX 与 class 组件的工作方式相同（只需使用 this.props 而不是 props）。

【讨论】：

【解决方案2】：

对于基于列表或数组的渲染组件，您应该使用 javascript .map 函数，这里有关于此的 react 文档：

https://es.reactjs.org/docs/lists-and-keys.htmlhttps://es.reactjs.org/docs/lists-and-keys.html

抱歉发布链接，我现在正在使用我的手机。问候！

【讨论】：

【解决方案3】：

您可以将任何类型的 JavaScript 值作为道具传递：

<BackgroundImage imagePath={images} backgroundDuration={5000}/>

然后，您的渲染函数会像访问其他任何道具一样访问道具：

const path:string = this.props.imagePath[this.state.index];
return (
  <div
    style={{
      width: "100%",
      height: "100%",
      backgroundSize: "cover",
      backgroundImage: `url(${path})`
    }}
  ></div>
);

【讨论】：