setstate 相关问题

我正在创建一个whatsapp克隆。为了显示个人资料图片，我制作了一个从 top_bar 组件访问的卡片组件。函数 Show_dp(prop){ 返回（我正在创建一个 Whatsapp 克隆。为了显示个人资料图片，我制作了一个卡片组件，可以从 top_bar 组件访问。 function Show_dp(prop){ return( <div id="box"> <div id="dp"> <img src={prop.image}></img> </div> <div id="buttons"> <div className="buttons_dp"> <FontAwesomeIcon className="ico" fontSize="1.5em" color="white" icon={faMessage} /> </div> </div> ) } export default Show_dp; top_bar组件如下： function Top_bar(prop){ const [dp, setdp] = useState(false); function toggle_dp(){ setdp(!dp); console.log(dp); } return( <> <div id="bar_container"> <div id="bar_left"> <FontAwesomeIcon fontSize="1.2em" color="#ebebeb" icon={faArrowLeftLong} className="icon"/> {/* <FontAwesomeIcon fontSize="1.5em" color="#ebebeb" icon={faUserCircle} className="icon"/> */} <div id="profile_picture" onClick={toggle_dp}> <img src={prop.image}></img> </div> </div> <div id="bar_middle">{prop.name}</div> <div id="bar_right"> <FontAwesomeIcon fontSize="1.1em" color="#ebebeb" icon={faVideoCamera} className="icon"/> <FontAwesomeIcon fontSize="1.1em" color="#ebebeb" icon={faPhone} className="icon"/> <FontAwesomeIcon fontSize="1.1em" color="#ebebeb" icon={faCog} className="icon"/> </div> </div> <div id="dp_card" style={{display: dp? "flex": "none"}}> <Show_dp image = {profile_picture} /> </div> </> ) } export default Top_bar; 在这个 top_bar 组件中，每当我单击 profile_picture div 时，它都会显示 dp_card 组件。现在，当 dp_card 组件显示时，我想让 dp_card 的 Buttons_dp 按钮在 top_bar 组件内执行某些操作（即隐藏 dp_card onClick）。所以，我想从Top_bar组件访问Show_dp组件的onClick按钮。我怎样才能做到同样的事情？请帮助我学习新东西！在上图中（显示 dp_card 组件），我想访问消息按钮（最左），这将有助于删除 dp_card（即将 dp_card 的显示设置为“none”）。我在另一个组件中使用一个组件的 onClick 按钮时遇到麻烦。要允许 Top_bar 组件控制 Show_dp 组件内按钮的行为，您可以通过 props 向上提升状态并向下传递函数。在 React 中它被称为 Lifting State Up 你可以在这里阅读更多相关信息。 https://react.dev/learn/sharing-state- Between-components Show_dp 组件 import React from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faMessage } from '@fortawesome/free-solid-svg-icons'; function Show_dp({ image, onClose }) { return ( <div id="box"> <div id="dp"> <img src={image} alt="Profile" /> </div> <div id="buttons"> <div className="buttons_dp" onClick={onClose}> <FontAwesomeIcon className="ico" fontSize="1.5em" color="white" icon={faMessage} /> </div> </div> </div> ); } export default Show_dp; Top_bar 成分： import React, { useState } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faArrowLeftLong, faVideoCamera, faPhone, faCog } from '@fortawesome/free-solid-svg-icons'; import Show_dp from './Show_dp'; // Adjust it if required function Top_bar({ image, name }) { const [dpVisible, setDpVisible] = useState(false); function toggle_dp() { setDpVisible(!dpVisible); } function handleClose() { setDpVisible(false); } return ( <> <div id="bar_container"> <div id="bar_left"> <FontAwesomeIcon fontSize="1.2em" color="#ebebeb" icon={faArrowLeftLong} className="icon" /> <div id="profile_picture" onClick={toggle_dp}> <img src={image} alt="Profile" /> </div> </div> <div id="bar_middle">{name}</div> <div id="bar_right"> <FontAwesomeIcon fontSize="1.1em" color="#ebebeb" icon={faVideoCamera} className="icon" /> <FontAwesomeIcon fontSize="1.1em" color="#ebebeb" icon={faPhone} className="icon" /> <FontAwesomeIcon fontSize="1.1em" color="#ebebeb" icon={faCog} className="icon" /> </div> </div> <div id="dp_card" style={{ display: dpVisible ? "flex" : "none" }}> <Show_dp image={image} onClose={handleClose} /> </div> </> ); } export default Top_bar;

javascript html css reactjs setstate

回答 1 投票 0

为什么我的setstate函数会导致react.js中其他函数出现故障？

const [lap, setLap] = useState([]); 函数开始（）{ 如果（！isStart）{ 开始 = Date.now() - 已过去；开始=真；计时器 = setInterval(更新, 1000); ...

javascript html reactjs setstate stopwatch

回答 1 投票 0

为什么flutter_fortune_wheel总是在页面打开后立即运行？

嗨，我想在我的项目中使用 flutter_fortune_wheel 。我希望滚轮仅在用户单击按钮或触摸滚轮时移动，但滚轮总是在屏幕显示后立即移动。我设置了“animateFir...

android flutter setstate

回答 2 投票 0

setState 在数据修改时不触发重新渲染（状态类型为变量）

我用setState更改了状态，但没有触发重新渲染。我认为这是一个小问题，所以我广泛搜索，但找不到解决方案。我想检查第二个和第三个