如何解决如何将 img 添加为动态组件
所以我想要做的是为这个 div 图像添加动态值我想从这里删除整个图像将它们作为数组带到另一个组件，然后使用 map() 动态更改屏幕上的这些图像
return (
<div className="container">
<div ref={sliderRef} id="slider" className="slide-wrap">
<div
ref={holderRef}
id="holder"
onMouseDown={mouseDown}
onMouseMove={mouseMoveHandle}
onMouseUp={mouseUp}
onTouchStart={touchStart}
onTouchMove={touchMove}
onTouchEnd={touchEnd}
className="slide_holder"
>
<div id="menus" className="slide_menus animation" ref={menusRef}>
<div className="menu">
<img
id="img"
className="img-responsive"
src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/GFSJVKYET2.jpg"
alt=""
/>
</div>
<div className="menu">
<img
className="slide-img img-responsive"
src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/FH2HGFAG69.jpg"
alt=""
/>
</div>
<div className="menu">
<img
className="slide-img img-responsive"
src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/FH2HGFAG69.jpg"
alt=""
/>
</div>
</div>
</div>
</div>
解决方法
你必须完全按照你说的去做。使用图像的属性创建一个数组并将它们映射到组件：
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
class Images extends React.Component {
render() {
const myImages = [
{className: null,alt: "random-image-1",src: "https://miro.medium.com/max/5000/1*1BUIofZgqVuR6nj8LbrRtQ.jpeg"},{className: null,alt: "random-image-2",src: "https://files.realpython.com/media/random_data_watermark.576078a4008d.jpg"},alt: "random-image-3",src: "https://www.freecodecamp.org/news/content/images/2020/11/Untitled-design--1-.png"}
]
return (
myImages.map((image,idx) => {
return (
<img
key={idx}
className={image.className}
src={image.src}
alt={image.alt} />
)
})
)
}
}
ReactDOM.render(<Images />,document.getElementById("root"));
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
看看这个 SO 问题：How to map an array of objects in React
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
