Блог

Я работаю над всплывающим компонентом, где родительский компонент имеет следующий код

 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";
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 amp;amp; (
        <section>
          <h4>{data[0].customerFocus.title}</h4>
          <p>{data[0].customerFocus.content}</p>
          <button onClick={toggleCustomerFocus}>Close 1</button>
        </section>
      )}
      {persistence amp;amp; (
        <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

Хотя вы могли бы передать состояние и параметр из родительского App компонента, это не имеет большого смысла для вашего примера.

Я бы постарался сохранить Popup компонент более общим.

В приведенном ниже примере Popup компонент управляет своим собственным состоянием пользовательского интерфейса (открыт / закрыт), но все содержимое передается в качестве реквизита.

 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 amp;amp; (
        <section>
          <h4>{title}</h4>
          <p>{content}</p>
          <button onClick={() => setShowDetails(false)}>Close 2</button>
        </section>
      )}
    </>
  );
}