英文:
Call component on button click or make multiple useStates?
问题
我目前正在尝试使用React和Bootstrap创建图像库。忽略实际内容和语法,以下是代码的大致外观。我想要总共6张图像,它们以3x2的网格方式排列。每个图像都有一个鼠标悬停事件,当鼠标悬停时,它会显示一个带有一些文本的黑色半透明背景。
问题在于它看起来有点混乱。我需要重复使用useState 6次来呈现6个不同的模态弹出窗口。是否有更干净的方法来实现这一点?
我正在考虑的一种方法如下:
<button onClick={() => {
<ModalPictures // 这将是一个单独的组件
props='blah'
propsTwo='blah'
/>
}}
但是当我尝试这样做时,它实际上不起作用。任何建议将不胜感激。
英文:
I'm currently trying to make an image gallery using react and bootstrap.
ignoring the actual content and syntax, this is kind of what the code looks like. I want a total of 6 images that are side by side in a 3x2 grid. Each image has a onHover where itll show a black transparent background with some text.
function Projects() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const [show1, setShow1] = useState(false);
const handleClose1 = () => setShow1(false);
const handleShow1 = () => setShow1(true);
const [show1, setShow2] = useState(false);
const handleClose2 = () => setShow2(false);
const handleShow2 = () => setShow2(true);
x3 more times
return (
<div class="img__wrap"> // this is just the first image
<img class="projectCard" src={test} />
<div class="img__description_layer">
<p class="img__description">some text.</p>
<button onClick={handleShow}>test</button>
<Modal show={show} onHide={handleClose}>
<Modal.Header className="background" closeButton>
<Modal.Title className="smallerProjectHeadings">title</Modal.Title>
</Modal.Header>
<Modal.Body className="background">
<Image className='projectImg' src={image} alt='Oneshot' fluid />
</Modal.Body>
<Modal.Footer className="background" >
some stuff here
</Modal.Footer>
</Modal>
</div>
</div>
)
The issue is it looks kind of messy. I would have to repeat each of the useStates a total of 6 times to render 6 different modal popups. Is there a cleaner way to do this?
Something I was thinking I'd like to do is like this:
<button onClick={()=>{
<ModalPictures // this would a separate component
props='blah'
propsTwo='blah'
/>
}}
but when I try this, it doesn't actually do anything
any advice would be appreciated.
答案1
得分: 0
只有一个或者最多两个useState
已经足够了,可以完成你尝试做的事情。并且,只因为你有6张图片,不意味着你需要使用6个模态框。
我创建了一个简单的沙盒示例来展示如何实现这一点。点击列表项中的任何一个以查看。
const arrayOfLength6 = Array(6)
.fill()
.map((_, i) => i);
const Modal = ({ show, data, onHide }) => {
if (!show) return null;
return (
<>
<p>{data}</p>
<button onClick={onHide}>Close</button>
</>
);
};
export default function App() {
const [selected, setSelected] = useState();
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<ul>
{arrayOfLength6.map((i) => (
<li onClick={() => setSelected(i)} key={i}>
I'm image at index {i}
</li>
))}
</ul>
<Modal
onHide={() => setSelected(undefined)}
show={typeof selected !== "undefined"}
data={selected}
/>
</div>
);
}
思路是在点击时将所选图片的信息存储在状态中。在我的示例中,我只存储了图片的索引,但你也可以存储与所选图片相关的数据,并将数据作为props传递给模态框。
英文:
Only one or maybe two useState
s are more than enough for what you're trying to do. And just because you have 6 images you don't need to use 6 modals.
I created a simple sandbox to show how this can be achieved. Click on any of the list items to see.
const arrayOfLength6 = Array(6)
.fill()
.map((_, i) => i);
const Modal = ({ show, data, onHide }) => {
if (!show) return null;
return (
<>
<p>{data}</p>
<button onClick={onHide}>Close</button>
</>
);
};
export default function App() {
const [selected, setSelected] = useState();
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<ul>
{arrayOfLength6.map((i) => (
<li onClick={() => setSelected(i)} key={i}>
I'm image at index {i}
</li>
))}
</ul>
<Modal
onHide={() => setSelected(undefined)}
show={typeof selected !== "undefined"}
data={selected}
/>
</div>
);
}
The idea is to keep track of the selected image in the state when it is clicked. In my example, I'm just storing the index of the image but you can store the data associated with an image when it's selected and pass the data as props to the modal.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论