英文:
How can I change prop value in react component to close my popup?
问题
我正在尝试创建一个弹出功能，但不使用Redux。
我的弹出组件接收一个名为activePopup的prop，其值为true或false。
当它为true时，我的弹出窗口会显示出来，但我无法将此prop更改为false以关闭弹出窗口，因为activeProp只能在父组件中更改。
我正在尝试修复我的弹出组件，以使它可以按我想要的方式工作。因为我的弹出窗口可以打开，但无法在组件内部关闭。
英文:
I'm trying to make a popup functionality but without Redux.
My popup component gets a prop called activePopup and width values true or false.
When it's true, my popup is showing up, but I can't change this prop to false for
closing this popup, because activeProp can be change only in the parent component.
const Popup = ({ isActive }) => {
return (
<div className={isActive ? "popup" : ""}>
<div className="popupContent">
<h2>
Welcome to popup!
<button title="close popup">X</button>
</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio neque
cupiditate officiis cum rem iste aliquam ut ipsum quidem non, aperiam
eos harum similique, architecto a minus explicabo atque error.
</p>
</div>
</div>
);
};
I trying to fix my popup component so that he/she can work like I want. Because my popup can open, but it can't close inside the component.
答案1
得分: 0
将（可能）在父组件中管理的状态通过 hooks 转移到组件的本地状态。
import React, { useState } from 'react';
const Popup = () => {
const [isActive, setIsActive] = useState(false);
return (
<div className={isActive ? "popup" : ""}>
<div className="popupContent">
<h2>
欢迎使用弹出窗口！
<button title="关闭弹出窗口" onClick={() => setIsActive(false)}>X</button>
</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio neque
cupiditate officiis cum rem iste aliquam ut ipsum quidem non, aperiam
eos harum similique, architecto a minus explicabo atque error.
</p>
</div>
</div>
);
};
英文:
Transfer the state that is (probably) managed in your parent component into the local state of the component via hooks.
import React, {useState} from 'react'
const Popup = () => {
const [isActive, setIsActive] = useState(false)
return (
<div className={isActive ? "popup" : ""}>
<div className="popupContent">
<h2>
Welcome to popup!
<button title="close popup" onClick={() => setIsActive(false)}>X</button>
</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio neque
cupiditate officiis cum rem iste aliquam ut ipsum quidem non, aperiam
eos harum similique, architecto a minus explicabo atque error.
</p>
</div>
</div>
);
};
答案2
得分: 0
four-eyes的答案很好，除了你不能再从父组件控制弹出窗口。你只需将状态和状态设置器作为props传递，并将你的代码与four-eyes的代码合并。
父组件：
const ParentComponent = ({ isActive, setIsActive }) => {
const [isActive, setIsActive] = useState(false);
return (
<div>
<button onClick={() => setIsActive(true)}>打开弹出窗口</button>
<Popup isActive={isActive} setIsActive={setIsActive} />
</div>
);
}
弹出窗口组件：
const Popup = ({ isActive, setIsActive }) => {
return (
<div className={isActive ? "popup" : ""}>
<div className="popupContent">
<h2>
欢迎来到弹出窗口!
<button title="关闭弹出窗口" onClick={() => setIsActive(false)}>X</button>
</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio neque
cupiditate officiis cum rem iste aliquam ut ipsum quidem non, aperiam
eos harum similique, architecto a minus explicabo atque error.
</p>
</div>
</div>
);
};
现在你可以从组件内外控制状态了。
英文:
four-eyes's answer is good, except you can't control the popup from the parent anymore. You can just pass the state and the state-setter as props and merge your code with four-eyes' code.
Parent Component:
const ParentComponent = ({ isActive, setIsActive }) => {
const [isActive, setIsActive] = useState(false)
return (
<div>
<button onClick={()=> setIsActive(true)}> Open Popup </button>
<Popup isActive={isActive} setIsActive={setIsActive} />
</div>
)
}
Popup component
const Popup = ({ isActive, setIsActive }) => {
return (
<div className={isActive ? "popup" : ""}>
<div className="popupContent">
<h2>
Welcome to popup!
<button title="close popup" onClick={() => setIsActive(false)}>X</button>
</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio neque
cupiditate officiis cum rem iste aliquam ut ipsum quidem non, aperiam
eos harum similique, architecto a minus explicabo atque error.
</p>
</div>
</div>
);
};
So now you can control the state from in and out of the component
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论