反应Js多模态

Question

嗨，我试着学习反应，我试着做多个模态，但是相同的符号和所有的东西，但是里面的内容不同，怎么做？

import './Works.css';
import React, { useState } from 'react'
import Modal from '../Modal/Modal'

function Works(props){
const [isOpen, setIsOpen] = useState(false)
return(
    <div>
        <div className={props.NameClass}>
            <h1>{props.icon}</h1>
            <h1>{props.title}</h1>
            <p >simple pargraph</p>
            <button className="button_more" onClick={() => setIsOpen(true)}><i className="fas fa-caret-right"></i></button>
        </div>
        <Modal open={isOpen} title="hi" onClose={() => setIsOpen(false)}>
         </Modal>
    </div>
)
}

export default Works

如果你看一下 setIsOpen(false)}>

和这里的App.js多次调用顶部的文件，但我想举个例子，如果有人单击第二个项目，它会将标题更改为“嗨，您在第二个模式中！”！

<div class="Div-Projects">
          <Works NameClass="First_Project" icon="" title="first" />
          <Works NameClass="Second_Project" icon="" title="second" />
          <Works NameClass="Third_Project" icon="‍" title="third" />
     </div>

这是模态代码！

import './Modal.css'

 function Modal({open , title,  onClose}){
if(!open) return null
return(
    <div className="popup">
    <div className="content">
        <h1>{title}</h1>
        <div className="p">
            <p>login system for students attendees with an arduino and python it shows how fast and stable for doing the job.login system for students attendees with an arduino and python it shows how fast and stable for doing the job.login system for students attendees with an arduino and python it shows how fast and stable for doing the job.</p>
        </div>
        <div className="buttons">
            <button className="dismiss" onClick={onClose}>Dismiss!</button>
            <button className="github" onClick={() => window.open( 'https://github.com/Majiedo/Login_System')}><i className="fab fa-github"></i></button>
            <button className="code"><i className="fas fa-code"></i></button>
        </div>
    </div>
</div>
)
}

 export default Modal

Answer 1

为什么不把作品道具传递给Modal组件呢？如下所示：

function Works(props){
const [isOpen, setIsOpen] = useState(false)
return(
    <div>
        <div className={props.NameClass}>
            <h1>{props.icon}</h1>
            <h1>{props.title}</h1>
            <p >simple pargraph</p>
            <button className="button_more" onClick={() => setIsOpen(true)}><i className="fas fa-caret-right"></i></button>
        </div>
        <Modal open={isOpen} title={`hi you're in the ${props.title} modal!`} onClose={() => setIsOpen(false)}/>
    </div>
)
}

Answer 2

您需要传递标题{props.title}，更改它：

<Modal open={isOpen} title="hi" onClose={() => setIsOpen(false)}>
         </Modal>

在这方面：

 <Modal open={isOpen} title={`hi you're in the ${props.title}`} onClose={() => setIsOpen(false)}/>