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

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

export default function App() {
  return (
    

Hello CodeSandbox

Start editing to see some magic happen!

); }

Дочерний компонент должен отображать пользовательское всплывающее окно в зависимости от реквизита

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 (
    <>
      
{alt}
{coreValue}
{customerFocus && (

{data[0].customerFocus.title}

{data[0].customerFocus.content}

)} {persistence && (

{data[1].persistence.title}

{data[1].persistence.content}

)} ); }

В месте

я хотел бы передать пользовательскую функцию onClick от родителя к его дочернему окну, чтобы первое всплывающее окно отображало фиктивный заголовок 1 и фиктивное содержимое 1 при нажатии, а второе всплывающее окно отображало фиктивный заголовок 2 и фиктивное содержимое 2 при нажатии. На данный момент оба окна отображают одно и то же всплывающее окно при щелчке.

Как передать пользовательскую функцию onClick от родителя к ребенку?

Ссылка на Codeandbox

dev_el

Ответы (1)

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

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

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

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 (
    

Hello CodeSandbox

Start editing to see some magic happen!

{data.map(({ title, content, src, alt, coreValue }) => ( ))}
); } 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 ( <>
setShowDetails(true)}> {alt}
{coreValue}
{showDetails && (

{title}

{content}

)} ); }

Edit Popup (forked)

2022 WebDevInsider