Javascript 显示对话框组件onClick事件react

我是个新手，我有一个名为“信息”的父组件和一个名为“卡”的子组件。在“卡片”组件中，用户可以单击按钮，然后此事件会出现在父组件中并在那里处理。我想通过一个模式窗口显示一个不同的组件，该窗口依赖于冒泡事件捕获的id。我不太清楚如何做到这一点。我正在使用bulma作为模式窗口，因此我还需要向子组件添加一个活动类来打开模式窗口。这就是我目前所拥有的

import React, {Component} from 'react';
//import CardData from '../data/CardData';
import placeholder from '../assets/images/placeholder.png';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faQuoteRight, faQuoteLeft } from '@fortawesome/free-solid-svg-icons';
import FeaturesDialog from './FeaturesDialog';


const Card = (props) => {

    const sendData = (e) => {
        props.parentCallback(e);
    }

    const rows = props.cardData.map((row, index) => {
        return (   
            <div key={index} className="card-container">         
                <div className="columns">
                    <div className="column">
                        <img className="image-placeholder" src={row.image} alt=""/>
                    </div>
                    <div className="column">    
                        <span className="name-text-column">{row.name}</span>
                    </div>
                    <div className="column">
                        <span>{row.description}</span>
                    </div>
                    <div className="column">
                        <button onClick={sendData} id={row.id} className="button is-wood">Find Out More</button>
                    </div>
                </div>      
            </div>       
        )    
    })

    return [rows]
}

class Information extends Component {

    callback = (event) => {
        const id = event.target.id;

        switch(id) {
            case "1":
                console.log(<FeaturesDialog />)
                break;
            case "2":
                break;
            case "3":

                break;
            case "4":
                break
            case "5":
                break
            case "6":
                break;
            default:
          }
    }

    render() {
        const cardInfo = [
            {
                id: 1,
                image: placeholder,
                name: 'Features & Highlights',
                description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
            },
            {
                id: 2,
                image: placeholder,
                name: 'Overview',
                description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
            },
            {
                id: 3,
                image: placeholder,
                name: 'Preperation',
                description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
            },
            {
                id: 4,
                image: placeholder,
                name: 'Application',
                description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
            },
            {
                id: 5,
                image: placeholder,
                name: 'Aftercare',
                description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
            },
            {
                id: 6,
                image: placeholder,
                name: 'F.A.Q.',
                description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
            }
         ]

         const data = {
             title: 'Osmo Polyx Oil',
             description: 'The original clear, hard wax oil from Osmo suitable for most interior wood surfaces.'
         }

        const {title, description} = data;

        return (
            <section className="section info-section">
                <div className="info-title-wrapper">
                    <div className="columns">
                        <div className="column">
                            <h2>{title}</h2>
                        </div>
                        <div className="column">
                            <span className="oil-description"><FontAwesomeIcon className="left-quote" icon={ faQuoteLeft }/>{description}<FontAwesomeIcon className="right-quote" icon={ faQuoteRight }/></span>
                        </div>
                    </div>
                </div>
                <div className="info-elements-wrapper">
                    <Card parentCallback={this.callback} cardData={cardInfo} /> 
                </div>   
            </section>
        )
    }
}

export default Information

import React，{Component}来自'React'；
//从“../data/CardData”导入CardData；
从“../assets/images/placeholder.png”导入占位符；
从'@fortawesome/react fontawesome'导入{FontAwesomeIcon}；
从“@fortawesome/free solid svg icons”导入{faQuoteRight，faQuoteLeft}；
从“/FeaturesDialog”导入功能对话框；
康斯特卡=（道具）=>{
const sendData=（e）=>{
道具（e）；
}
const rows=props.cardData.map（（行，索引）=>{
报税表（
{row.name}
{row.description}
了解更多
)    
})
返回[行]
}
类信息扩展组件{
回调=（事件）=>{
const id=event.target.id；
开关（id）{
案例“1”：
console.log（）
打破
案例“2”：
打破
案例“3”：
打破
案例“4”：
打破
案例“5”：
打破
案例“6”：
打破
违约：
}
}
render（）{
常数cardInfo=[
{
id:1，
图像：占位符，
名称：“功能和亮点”，
描述：“Lorem ipsum dolor sit amet，奉献精英，在劳动和生活中暂时占有一席之地。”，
},
{
id:2，
图像：占位符，
名称：“概述”，
描述：“Lorem ipsum dolor sit amet，奉献精英，在劳动和生活中暂时占有一席之地。”，
},
{
id:3，
图像：占位符，
名称：'预操作'，
描述：“Lorem ipsum dolor sit amet，奉献精英，在劳动和生活中暂时占有一席之地。”，
},
{
id:4，
图像：占位符，
名称：“应用程序”，
描述：“Lorem ipsum dolor sit amet，奉献精英，在劳动和生活中暂时占有一席之地。”，
},
{
id:5，
图像：占位符，
名称：“售后服务”，
描述：“Lorem ipsum dolor sit amet，奉献精英，在劳动和生活中暂时占有一席之地。”，
},
{
id:6，
图像：占位符，
名称：“F.A.Q.”，
描述：“Lorem ipsum dolor sit amet，奉献精英，在劳动和生活中暂时占有一席之地。”，
}
]
常数数据={
标题：“Osmo Polyx油”，
说明：“来自Osmo的原始透明硬蜡油适用于大多数内部木材表面。”
}
常量{title，description}=数据；
返回(
{title}
{说明}
)
}
}
导出默认信息

功能部件：

  import React, {Component} from 'react';

class FeaturesDialog extends Component {
    render() {
        return (
            <div className="modal">
                <div className="modal-background"></div>
                <div className="modal-card">
                    <header className="modal-card-head">
                    <p className="modal-card-title">Modal title</p>
                    <button className="delete" aria-label="close"></button>
                    </header>
                    <section className="modal-card-body">
                    </section>
                    <footer className="modal-card-foot">
                        <button className="button is-success">Save changes</button>
                        <button className="button">Cancel</button>
                    </footer>
                </div>
            </div>
        )
    }
}

export default FeaturesDialog

import React，{Component}来自'React'；
类功能Dialog扩展组件{
render（）{
返回(
模态标题
保存更改
取消
)
}
}
导出默认功能对话框