Javascript React hooks-通过函数从子级设置父级的状态

我正在学习的家伙们做出反应，我决定尝试建立英雄数据库，但我遇到了一个问题

当我点击任何英雄，生物状态和显示状态更新与英雄和模态窗口弹出更多关于他的信息数据。但我不知道如何关闭它。当我试图从子组件调用函数（updateDisplay）时，我将模态作为一个单独的组件。该选项应将显示状态设置为False，但不起作用：/

Heroes.js

import React, { useState } from "react";
import Hero from "./Hero";
import styled from "styled-components";

function Heroes(props) {
  const [Bio, setBio] = useState([]);
  const [Display, setDisplay] = useState(false);

  const SingleHeroCont = styled.div`
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    padding: 10px;
    align-items: center;
  `;

  const content = props.data.map((Hero) => (
    <SingleHeroCont
      onClick={() => {
        setBio(Hero);
        setDisplay(true);
      }}
      key={Hero.id}
    >
      <h1>{Hero.name}</h1>
      <img src={Hero.images.sm} alt="Sorry guys"></img>
    </SingleHeroCont>
  ));

  const updateDisplay = () => {
    setDisplay(false);
  };

  return (
    <div className="heroes_cont">
      <Hero updateDisplay={updateDisplay} Display={Display} BioData={Bio} />
      {content}
    </div>
  );
}

export default Heroes;

import React，{useState}来自“React”；
从“/Hero”导入Hero；
从“样式化组件”导入样式化；
功能英雄（道具）{
const[Bio，setBio]=useState（[]）；
const[Display，setDisplay]=useState（false）；
const SingleHeroCont=styled.div`
显示器：flex；
弯曲方向：立柱；
边缘顶部：10px；
填充：10px；
对齐项目：居中；
`;
const content=props.data.map（（英雄）=>(
{
塞比奥（英雄）；
设置显示（真）；
}}
key={Hero.id}
>
{Hero.name}
));
const updateDisplay=（）=>{
设置显示（假）；
};
返回(
{content}
);
}
导出默认英雄；

Hero.js

import React from "react";
import styled from "styled-components";

function Hero({ Display, updateDisplay, BioData }) {
  const HeroAbsolute = styled.div`
    display: ${(props) => (props.showBio ? "block" : "none")};
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 255, 255, 0.5);
  `;


  return (
    <HeroAbsolute showBio={Display}>
      <div className="hero_bio_cont">
        <h1>{BioData.name}</h1>
        <button onClick={() => updateDisplay}>Close</button>
        <div className="hero_bio_appearance">
          <div>
            <img></img>
            <div>
              <h2>{BioData.powerstats?.power}</h2>
              <h2></h2>
              <h2></h2>
            </div>
          </div>
        </div>
      </div>
    </HeroAbsolute>
  );
}

export default Hero;

从“React”导入React；
从“样式化组件”导入样式化；
函数英雄（{Display，updateDisplay，BioData}）{
常量=styled.div`
显示：${（道具）=>（props.showBio？“块”：“无”）}；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景色：rgba（0,255,255,0.5）；
`;
返回(
{BioData.name}
updateDisplay}>关闭
{BioData.powerstats？.power}
);
}
导出默认英雄；

或

关闭

第二种情况请参考箭头函数教程

或

关闭

---

关于第二种情况，请参阅箭头函数教程。

非常感谢，它成功了。这是一个愚蠢的错误，我花了大约两个小时；）非常感谢，它成功了。这是一个愚蠢的错误，我花了大约两个小时；）

<button onClick={() => updateDisplay}>Close</button>

<button onClick={() => updateDisplay()}>Close</button>

<button onClick={updateDisplay}>Close</button>