javascript - React: How to pass an array as props and render a list of images? - Stack Overflow

admin管理员组

文章数量:1324792

I am new to react. I want to loop images list(Json) and show these images on screen. So I want to create a prop with Array. But I don't know how to pass Array as props? Would you help take a look?

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

I am new to react. I want to loop images list(Json) and show these images on screen. So I want to create a prop with Array. But I don't know how to pass Array as props? Would you help take a look?

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

• javascript
• reactjs
• typescript
• frontend

Share Follow edited Mar 27, 2020 at 6:08 taseenb 1,44311 gold badge1717 silver badges3131 bronze badges asked Mar 26, 2020 at 23:51 reactnativereactnative 58533 gold badges99 silver badges1616 bronze badges 2

• 1 Please, refer this it has already been asnwered - stackoverflow./questions/31883601/… – Ram Sankhavaram Commented Mar 27, 2020 at 0:02
• Does this answer your question? passings array as props in reactjs – Codebling Commented Mar 27, 2020 at 0:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You can pass any javascript variable to a prop. So for example, if you want to loop through an array of URLs and render an img tag for each:

// ImageList.js file

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

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

And in the parent ponent you'd have something like:

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

This example uses function ponents, but props and JSX work the same way with class ponents (just use this.props instead of props).

For rendering ponents based on a list or an array, you should use the javascript .map function, here you have the react docs about this:

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

Sorry for the posting the link, I'm using my phone right now. Regards!

You can pass any type of JavaScript value as a prop:

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

Your render function then accesses the prop as any other prop:

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

本文标签： javascriptReact How to pass an array as props and render a list of imagesStack Overflow