如何在反应中将自定义 onClick 函数从父级传递给子级

Question

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

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>
  );
}

子组件应该根据 props 呈现一个自定义的弹出窗口

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>
      )}
    </>
  );
}

在 <figure onClick={toggleCustomerFocus}> 处，我想将自定义 onClick 函数从父级传递给其子级，以便第一个弹出窗口在单击时呈现虚拟标题 1 和虚拟内容 1，而第二个弹出窗口呈现虚拟单击时标题 2 和虚拟内容 2。截至目前，两者都在点击时呈现相同的弹出窗口。

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

Codesandbox link

Answer 1

虽然您可以从父 App 组件传入 state 和 setter，但这对您的示例没有多大意义。

我会尽量让 Popup 组件更通用。

在下面的示例中，Popup 组件管理自己的 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>
      )}
    </>
  );
}