Javascript 如何在react中将自定义onClick函数从父级传递到子级_Javascript_Reactjs_Typescript

Javascript 如何在react中将自定义onClick函数从父级传递到子级

javascript reactjs typescript

Javascript 如何在react中将自定义onClick函数从父级传递到子级,javascript,reactjs,typescript,Javascript,Reactjs,Typescript,我正在处理一个弹出组件，其中父组件具有以下代码 import * as React from "react"; import "./styles.css"; import Popup from "./Popup"; export default function App() { return ( <div className="App"> <h1>Hello Code

我正在处理一个弹出组件，其中父组件具有以下代码

import * as React from "react";
import "./styles.css";
import Popup from "./Popup";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Popup
        src="https://picsum.photos/200"
        alt="Fog"
        coreValue="Customer Focus"
      />
      <Popup
        src="https://picsum.photos/200/300?grayscale"
        alt="Grey Mountains"
        coreValue="Persistence"
      />
    </div>
  );
}

import*as React from“React”；
导入“/styles.css”；
从“/Popup”导入弹出窗口；
导出默认函数App（）{
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

子组件应根据道具呈现自定义弹出窗口

import * as React from "react";
import { useState } from "react";

interface Props {
  src: string;
  alt: string;
  coreValue: string;
}

export default function Popup({ src, alt, coreValue }: Props): JSX.Element {
  const [customerFocus, setCustomerFocus] = useState(false);
  const [persistence, setPersistence] = useState(false);

  const toggleCustomerFocus = () => {
    setCustomerFocus(!customerFocus);
  };

  const togglePersistence = () => {
    setPersistence(!persistence);
  };

  const data = [
    {
      customerFocus: {
        title: "Dummy Title 1",
        content: "Dummy Content 1"
      },
      persistence: {
        title: "Dummy Title 2",
        content: "Dummy Content 2"
      }
    }
  ];
  return (
    <>
      <figure onClick={toggleCustomerFocus}>
        <img src={src} alt={alt} />
        <figcaption>{coreValue}</figcaption>
      </figure>
      {customerFocus && (
        <section>
          <h4>{data[0].customerFocus.title}</h4>
          <p>{data[0].customerFocus.content}</p>
          <button onClick={toggleCustomerFocus}>Close 1</button>
        </section>
      )}
      {persistence && (
        <section>
          <h4>{data[1].persistence.title}</h4>
          <p>{data[1].persistence.content}</p>
          <button onClick={togglePersistence}>Close 2</button>
        </section>
      )}
    </>
  );
}

import*as React from“React”；
从“react”导入{useState}；
界面道具{
src：字符串；
alt：字符串；
coreValue：字符串；
}
导出默认函数弹出窗口（{src，alt，coreValue}:Props）：JSX.Element{
const[customerFocus，setCustomerFocus]=useState（false）；
const[persistence，setPersistence]=useState（false）；
const-toggleCustomerFocus=（）=>{
setCustomerFocus（！customerFocus）；
};
const togglePersistence=（）=>{
setPersistence（！persistence）；
};
常数数据=[
{
客户焦点：{
标题：“虚拟标题1”，
内容：“虚拟内容1”
},
持久性：{
标题：“虚拟标题2”，
内容：“虚拟内容2”
}
}
];
返回(
{coreValue}
{customerFocus&&(
{data[0].customerFocus.title}
{data[0].customerFocus.content}
关闭1
)}
{持久性&&(
{data[1]。persistence.title}
{data[1]。persistence.content}
结束2
)}
);
}

在

中，我想将一个自定义的

onClick

函数从父级传递给它的子级，这样第一个弹出窗口在单击时呈现虚拟标题1和虚拟内容1，第二个弹出窗口在单击时呈现虚拟标题2和虚拟内容2。到目前为止，单击时，两者都呈现相同的弹出窗口

如何将自定义onClick函数从父级发送到子级

虽然您可以从父级

应用程序

组件传入state和setter，但对于您的示例来说没有太多意义

我会尽量使

弹出窗口

组件更通用

在下面的示例中，

弹出窗口

组件管理自己的UI状态（打开/关闭），但所有内容都作为道具传入

import React, { useState } from "react";
import "./styles.css";

const data = [
  {
    title: "Customer Focus title",
    content: "Customer Focus content",
    src: "https://picsum.photos/200",
    alt: "Fog",
    coreValue: "Customer Focus"
  },
  {
    title: "Persistence title",
    content: "Persistence content",
    src: "https://picsum.photos/200/300?grayscale",
    alt: "Grey Mountains",
    coreValue: "Persistence"
  }
];

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {data.map(({ title, content, src, alt, coreValue }) => (
        <Popup
          title={title}
          content={content}
          src={src}
          alt={alt}
          coreValue={coreValue}
        />
      ))}
    </div>
  );
}

interface Props {
  title: string;
  content: string;
  src: string;
  alt: string;
  coreValue: string;
}

function Popup({
  title = "",
  content = "",
  src = "",
  alt = "",
  coreValue = ""
}: Props) {
  const [showDetails, setShowDetails] = useState(false);

  return (
    <>
      <figure onClick={() => setShowDetails(true)}>
        <img src={src} alt={alt} />
        <figcaption>{coreValue}</figcaption>
      </figure>
      {showDetails && (
        <section>
          <h4>{title}</h4>
          <p>{content}</p>
          <button onClick={() => setShowDetails(false)}>Close 2</button>
        </section>
      )}
    </>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
常数数据=[
{
标题：“以客户为中心标题”，
内容：“以客户为中心的内容”，
src:“https://picsum.photos/200",
alt:“雾”，
核心价值：“以客户为中心”
},
{
标题：“持久性标题”，
内容：“持久性内容”，
src:“https://picsum.photos/200/300?grayscale",
alt:“灰色山脉”，
coreValue：“持久性”
}
];
导出默认函数App（）{
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
{data.map（{title，content，src，alt，coreValue}）=>(
))}
);
}
界面道具{
标题：字符串；
内容：字符串；
src：字符串；
alt：字符串；
coreValue：字符串；
}
功能弹出窗口({
title=“”，
content=“”，
src=“”，
alt=“”，
coreValue=“”
}：道具）{
const[showDetails，setShowDetails]=useState（false）；
返回(
setShowDetails（true）}>
{coreValue}
{showDetails&&(
{title}
{content}
setShowDetails（false）}>Close 2
)}
);
}