admin管理员组文章数量:1323330
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>
);
}
}
Share
edited Mar 27, 2020 at 6:08
taseenb
1,4431 gold badge17 silver badges31 bronze badges
asked Mar 26, 2020 at 23:51
reactnativereactnative
5853 gold badges9 silver badges16 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
3 Answers
Reset to default 5You 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
版权声明:本文标题:javascript - React: How to pass an array as props and render a list of images? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742138531a2422477.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论