我正在做一個專案，最近才開始使用 React。到目前為止，我制作了卡片組件，它使用映射函式從 js 檔案動態呈現資料。正在呈現的資料之一是（存盤在陣列中）影像，其中我顯示第一個img 并設定一個打開模式的 onClick 函式。
這就是我被卡住的地方。模態以非目標img打開，我想首先在模態中顯示單擊的影像，然后傳遞該陣列中可以單擊的其余影像。像影像滑塊一樣。當我 console.log 影像我可以看到我在模態中獲取所有陣列，但我不知道如何相應地設定它們。
我會很感激一些輸入如何解決這個問題以及我做錯了什么。
我有一個父組件，它從 js 檔案接收資料。
class Room extends Component{
constructor(){
super();
this.state = {
data: roomData,
}
}
render(){
return (
<>
<div>helo from room page</div>
<RoomCards data={this.state.data} />
</>
);
}
}
這是卡片組件
import Modal from "../components/modal";
class RoomCards extends Component{
constructor(){
super();
this.state = {
showModal: false,
};
}
getModal = ()=> {
this.setState({ showModal: true })
}
hideModal = () => {
this.setState({ showModal: false });
}
render(){
return (
<>
{
this.props.data.map((data) => {
return <div className="card__container" key={data.id} >
<div className="card">
<h2 className="card__title">{data.name}</h2>
<p className="card__description">{data.paragraph}</p>
<ul><li>{data.list[0]}</li></ul>
<ul><li>{data.list[1]}</li></ul>
<ul><li>{data.list[2]}</li></ul>
<ul><li>{data.list[2]}</li></ul>
<div className="card__img">
<img src={data.image}
onClick={() => this.getModal(data)}
alt="將影像動態渲染為模態形式的影像映射陣列" />
<Modal
show={this.state.showModal}
onHide={() => this.hideModal()}
image={data.image} />
</div>
</div>
<button className="card__btn">Bestill overnatting</button>
</div>
})
}
</>
)
}
}
export default RoomCards
模態組件
import React, { Component } from "react";
import "../styles/Room.scss";
class Modal extends Component {
constructor(){
super();
this.state = {
index:0
};
}
next =() => {
if({index : this.state.index}){
this.setState({index: this.state.index 1});
}else {
this.setState({index: this.state.index})
console.log("heloo i am at index");
}
}
prev=()=>{
if(this.state.index === 0 || this.state.index === -1) {
console.log("hi")
}else {
this.setState({index :this.state.index - 1});
}
}
render() {
console.log(this.props.image)
return (
<React.Fragment>
{this.props.show && (
<div className="modal">
<img alt="" src={this.props.image[this.state.index]} key={this.state.index} />
{/* <img alt="" src={this.props.image[1]}/> */}
<button onClick={this.props.onHide}>Close Modal</button>
<button onClick={this.prev}>??</button>
<button onClick={this.next}>??</button>
</div>
)}
</React.Fragment>
);
}
}
export default Modal;
以及來自 js 檔案的資料
const roomData = [
{
id:1,
name: "standard room something new",
paragraph:"Hotellets standard enkeltrom passer perfekt til deg som reiser alene. Rommene er m?blert med enten en 90 cm seng eller en 160 cm bred seng, skrivebord, lenestol, og baderom med dusj ",
list: ["wifi", "tv", "ikke royken"],
image: ['https://images.unsplash.com/photo-1585255318859-f5c15f4cffe9?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixlib=rb-1.2.1&q=80&w=500',
'https://images.unsplash.com/photo-1584226761916-3fd67ab5ac3a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixlib=rb-1.2.1&q=80&w=500',
'https://images.unsplash.com/photo-1585084335487-f653d0859c14?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixlib=rb-1.2.1&q=80&w=500',
'https://images.unsplash.com/photo-1583217874534-581393fd5325?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixlib=rb-1.2.1&q=80&w=500',
]
},
{
id:2,
name: "standard room something new",
paragraph:"Hotellets standard enkeltrom passer perfekt til deg som reiser alene. Rommene er m?blert med enten en 90 cm seng eller en 160 cm bred seng, skrivebord, lenestol, og baderom med dusj ",
list: ["wifi","tv", "ikke royken"],
image: ['https://images.unsplash.com/photo-1585179292338-45ba1f62f082?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixlib=rb-1.2.1&q=80&w=500',
'https://images.unsplash.com/photo-1584753987666-ead137ec0614?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixlib=rb-1.2.1&q=80&w=500',
'https://images.unsplash.com/photo-1583217874534-581393fd5325?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixlib=rb-1.2.1&q=80&w=500',]
},
{
id:3,
name: "standard room something new",
paragraph:"Hotellets standard enkeltrom passer perfekt til deg som reiser alene. Rommene er m?blert med enten en 90 cm seng eller en 160 cm bred seng, skrivebord, lenestol, og baderom med dusj ",
list: ["wifi", "tv", "ikke..."],
image:['https://images.unsplash.com/photo-1584691267914-91c0bee55964?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixlib=rb-1.2.1&q=80&w=500',
'https://images.unsplash.com/photo-1585084335487-f653d0859c14?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixlib=rb-1.2.1&q=80&w=500']
},
{
id:4,
name: "standard room something new",
paragraph:"Hotellets standard enkeltrom passer perfekt til deg som reiser alene. Rommene er m?blert med enten en 90 cm seng eller en 160 cm bred seng, skrivebord, lenestol, og baderom med dusj ",
list: ["wifi", "tv,"],
image: ['https://images.unsplash.com/photo-1583217874534-581393fd5325?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixlib=rb-1.2.1&q=80&w=500']
}
]
export default roomData;
uj5u.com熱心網友回復：
這里的主要問題是，您正在為每個data映射的元素渲染一個模式，但使用一個showModal狀態，最終將所有元素一起打開/關閉。
我建議將要在模態中顯示的特定資料存盤到state.showModal狀態中，并帶有初始值null。有條件地渲染單個Modal組件。
class RoomCards extends Component {
state = {
showModal: null
};
getModal = (data) => {
this.setState({ showModal: data });
};
hideModal = () => {
this.setState({ showModal: null });
};
render() {
return (
<>
{this.props.data.map((data) => {
return (
<div className="card__container" key={data.id}>
<div className="card">
<h2 className="card__title">{data.name}</h2>
<p className="card__description">{data.paragraph}</p>
<ul>
{data.list.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
<div className="card__img">
<img
src={data.image}
onClick={() => this.getModal(data)}
alt="將影像動態渲染為模態形式的影像映射陣列"
/>
</div>
</div>
<button className="card__btn">Bestill overnatting</button>
</div>
);
})}
{this.state.showModal && (
<Modal
onHide={this.hideModal}
images={this.state.showModal?.image}
/>
)}
</>
);
}
}
修復模態以保持有效的當前索引值。
class Modal extends Component {
state = {
index: 0
};
next = () => {
const { images } = this.props;
this.setState(({ index }) => ({
index: Math.min(images.length - 1, index 1)
}));
};
prev = () => {
this.setState(({ index }) => ({
index: Math.max(0, index - 1)
}));
};
render() {
const { index } = this.state;
const { images, onHide } = this.props;
return (
<div className="modal">
<img alt="" src={images[index]} />
<button onClick={this.props.onHide}>Close Modal</button>
<button onClick={this.prev}>??</button>
<button onClick={this.next}>??</button>
</div>
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/412195.html
標籤：
上一篇：D3影像SVG未顯示