React Cycling Image Gallery

Question

我想创建一个显示多个图像的组件，它会在一段时间后更改单个图像。

到目前为止，我有这段代码：

import React from 'react';

const Gallery = (props) => {


  const cellStyle = {
    background: "red",
    padding: "0"
  }

const ImageCell = (props) => {
  return (
      <div className="col-lg-4" style={cellStyle}>
        <div style={{
                height: "100%",
                width: "100%",
                padding: "0",
                background: `url(${props.theImage})`,
                backgroundSize: "cover"
            }}
        >

        </div>
      </div>
  );
}

return(
  <div className="row full-width">
      {
          props.images.map(function(image) {
              let theKey = image.slice(14, -4);
              return <ImageCell key={theKey} theImage={image} />
          })
      }
  </div>
);

}

export default Gallery;

我希望它从6x6网格中切换出一个随机图像，然后用图像集中的随机图像切换它

所以我真的不知道如何实现这一点，欢迎任何想法。

Answer 1

您的Gallery应保留随机化逻辑并将图像传递给其子女。

因此，图像到显示可以在Gallery状态的数组中设置。实现componentDidMount方法并在那里实例化一个计时器;当计时器触发时，您可以使用总图像阵列中随机选择的图像替换状态数组中的一个图像。然后，更新状态将重新呈现Gallery，从而重新呈现其ImageCell个孩子。