Реагируйте: Как передать массив в качестве реквизита и отобразить список изображений?

Question

Я новичок, чтобы реагировать. Я хочу l oop список изображений (Json) и показать эти изображения на экране. Поэтому я хочу создать реквизит с помощью Array. Но я не знаю, как передать 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>
    );
  }
}

Answer 1

Вы можете передать любой тип значения 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>
);

Answer 2

Вы можете передать любую переменную javascript в prop . Так, например, если вы хотите l oop через массив 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 , но реквизиты и JSX работают аналогично с компонентами class (просто используйте this.props вместо props).

Answer 3

Для рендеринга компонентов на основе списка или массива вы должны использовать функцию javascript .map, здесь у вас есть документы по этому поводу:

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

Извините за публикацию ссылки, я сейчас использую свой телефон. Привет!