使用 react(-bootstrap) 通过相同的 json 文件填充卡片和模式?
populate cards and modals via same json file using react(-bootstrap)?
来自 workData 的数据正确填写 <Card></Card>
。
<Modal></Modal>
仅填充 workData 的最后一个条目(例如 Test4、Modal4、测试文本 4...)
我的目标是使用来自 json 的数据在同一个文件中生成卡片和相应的模式(对于每张卡片)。
为什么模态框只被 json 中的最后一个属性填充?我如何让它填充整个数组? 如果可能请解释为什么这不能像现在这样工作。
如果不是很明显我是超新的,我是,任何回复都将不胜感激。泰
cards good
after clicking "Read1" bad, should say Test1, test text 1
在App.js中:import { Works } from "./Works";
在 Works.js 中:import { workData } from "./data";
也在Work.js:
export const Works = () => {
const [show, setShow] = React.useState(false);
const onClick = () => setShow(true);
return (
<>
<div className="work-container">
<Row xs={1} md={2} lg={4} className="g-4">
{workData.map((data, key) => {
return (
<div key={key}>
<Col>
<Card>
<Card.Img variant="top" src={data.projectImage} />
<Card.Body>
<Card.Title>{data.projectTitle}</Card.Title>
<Card.Text>with {data.projectTeam}</Card.Text>
<Button variant="link" onClick={onClick}>
{data.readMore}
</Button>
</Card.Body>
<Card.Footer>{data.tags}</Card.Footer>
</Card>
</Col>
<Modal
show={show}
onHide={() => setShow(false)}
dialogClassName="modal-95w"
>
<Modal.Header closeButton>
<Modal.Title>{data.projectTitle}</Modal.Title>
</Modal.Header>
<Modal.Body>
<Image src={data.projectImage}></Image>
<p>
{data.modalText}
</p>
<Image src={data.modalImage}></Image>
</Modal.Body>
</Modal>
</div>
);
})}
</Row>
</div>
</>
);
}
在data.js中:
export const workData = [
{
projectTitle: "Test1",
modalTitle: "Modal1",
modalText: "test text 1",
modalImage: "image",
readMore: "Read1",
projectImage: "image",
projectTeam: "Test1",
year: "2022",
link1: "link",
link2: "link2",
tags: [
"#tag1 ",
"#tag2 "
]
},
...
来自 workData 的数据正确填写 <Card></Card>
。
<Modal></Modal>
仅填充 workData 的最后一个条目(例如 Test4、Modal4、测试文本 4...)
我的目标是使用来自 json 的数据在同一个文件中生成卡片和相应的模式(对于每张卡片)。
为什么模态框只被 json 中的最后一个属性填充?我如何让它填充整个数组? 如果可能请解释为什么这不能像现在这样工作。
cards good
after clicking "Read1" bad, should say Test1, test text 1
您迭代了 Cards 和 Modals 的 workData,但您对所有内容只使用一个状态。您需要做的是还为每个模态框创建一个状态。通常您创建一个数组,其中唯一 ID 作为键和布尔值。我假设 projectTitle 是唯一的:
{
Test1: false,
Test2: false,
Test3: false
}
因为您不知道数据的长度,所以您只是遍历数组,就像您对 Cards und Modals 所做的那样:
const initialShowState = Object.fromEntries(
workData.map((data) => [data.projectTitle, false])
);
const [show, setShow] = React.useState(initialShowState);
然后您需要创建一个通用回调函数,它获取卡片的 ID 并显示适当的模态框。我简化了逻辑并创建了一个切换函数:
const toggleShow = (id) =>
setShow((prev) => {
return { ...prev, [id]: !prev[id] };
});
最后,当渲染UI并遍历workData时,需要将回调函数应用于Button onClick和Modal onHide事件处理程序并设置显示属性 of Modal:
<Button variant="link" onClick={() => toggleShow(data.projectTitle)}>
...
<Modal
show={show[data.projectTitle]}
onHide={() => toggleShow(data.projectTitle)}
dialogClassName="modal-95w"
>
就是这样。这是工作沙箱:https://codesandbox.io/s/hungry-sunset-t865t3
一些一般提示:
- 您不需要 Works 中的外部片段,因为您只有一个最上面的元素
- 如果您在文件中使用 JSX 语法,您的扩展名应该是 .jsx 和 not.js (Works.jsx)
- 在列表中使用索引作为键是不好的做法。在您的数据中找到一些唯一的 ID
来自 workData 的数据正确填写 <Card></Card>
。
<Modal></Modal>
仅填充 workData 的最后一个条目(例如 Test4、Modal4、测试文本 4...)
我的目标是使用来自 json 的数据在同一个文件中生成卡片和相应的模式(对于每张卡片)。
为什么模态框只被 json 中的最后一个属性填充?我如何让它填充整个数组? 如果可能请解释为什么这不能像现在这样工作。
如果不是很明显我是超新的,我是,任何回复都将不胜感激。泰
cards good
after clicking "Read1" bad, should say Test1, test text 1
在App.js中:import { Works } from "./Works";
在 Works.js 中:import { workData } from "./data";
也在Work.js:
export const Works = () => {
const [show, setShow] = React.useState(false);
const onClick = () => setShow(true);
return (
<>
<div className="work-container">
<Row xs={1} md={2} lg={4} className="g-4">
{workData.map((data, key) => {
return (
<div key={key}>
<Col>
<Card>
<Card.Img variant="top" src={data.projectImage} />
<Card.Body>
<Card.Title>{data.projectTitle}</Card.Title>
<Card.Text>with {data.projectTeam}</Card.Text>
<Button variant="link" onClick={onClick}>
{data.readMore}
</Button>
</Card.Body>
<Card.Footer>{data.tags}</Card.Footer>
</Card>
</Col>
<Modal
show={show}
onHide={() => setShow(false)}
dialogClassName="modal-95w"
>
<Modal.Header closeButton>
<Modal.Title>{data.projectTitle}</Modal.Title>
</Modal.Header>
<Modal.Body>
<Image src={data.projectImage}></Image>
<p>
{data.modalText}
</p>
<Image src={data.modalImage}></Image>
</Modal.Body>
</Modal>
</div>
);
})}
</Row>
</div>
</>
);
}
在data.js中:
export const workData = [
{
projectTitle: "Test1",
modalTitle: "Modal1",
modalText: "test text 1",
modalImage: "image",
readMore: "Read1",
projectImage: "image",
projectTeam: "Test1",
year: "2022",
link1: "link",
link2: "link2",
tags: [
"#tag1 ",
"#tag2 "
]
},
...
来自 workData 的数据正确填写 <Card></Card>
。
<Modal></Modal>
仅填充 workData 的最后一个条目(例如 Test4、Modal4、测试文本 4...)
我的目标是使用来自 json 的数据在同一个文件中生成卡片和相应的模式(对于每张卡片)。
为什么模态框只被 json 中的最后一个属性填充?我如何让它填充整个数组? 如果可能请解释为什么这不能像现在这样工作。
cards good
after clicking "Read1" bad, should say Test1, test text 1
您迭代了 Cards 和 Modals 的 workData,但您对所有内容只使用一个状态。您需要做的是还为每个模态框创建一个状态。通常您创建一个数组,其中唯一 ID 作为键和布尔值。我假设 projectTitle 是唯一的:
{
Test1: false,
Test2: false,
Test3: false
}
因为您不知道数据的长度,所以您只是遍历数组,就像您对 Cards und Modals 所做的那样:
const initialShowState = Object.fromEntries(
workData.map((data) => [data.projectTitle, false])
);
const [show, setShow] = React.useState(initialShowState);
然后您需要创建一个通用回调函数,它获取卡片的 ID 并显示适当的模态框。我简化了逻辑并创建了一个切换函数:
const toggleShow = (id) =>
setShow((prev) => {
return { ...prev, [id]: !prev[id] };
});
最后,当渲染UI并遍历workData时,需要将回调函数应用于Button onClick和Modal onHide事件处理程序并设置显示属性 of Modal:
<Button variant="link" onClick={() => toggleShow(data.projectTitle)}>
...
<Modal
show={show[data.projectTitle]}
onHide={() => toggleShow(data.projectTitle)}
dialogClassName="modal-95w"
>
就是这样。这是工作沙箱:https://codesandbox.io/s/hungry-sunset-t865t3
一些一般提示:
- 您不需要 Works 中的外部片段,因为您只有一个最上面的元素
- 如果您在文件中使用 JSX 语法,您的扩展名应该是 .jsx 和 not.js (Works.jsx)
- 在列表中使用索引作为键是不好的做法。在您的数据中找到一些唯一的 ID