在React中,可以通过以下步骤从Modal1的按钮打开Modal2:
npm install react react-dom
import React, { useState } from 'react';
import Modal2 from './Modal2';
const Modal1 = () => {
const [showModal2, setShowModal2] = useState(false);
const openModal2 = () => {
setShowModal2(true);
};
return (
<div>
<button onClick={openModal2}>打开Modal2</button>
{showModal2 && <Modal2 />}
</div>
);
};
export default Modal1;
import React from 'react';
const Modal2 = () => {
return (
<div>
<h2>Modal2</h2>
{/* 在这里添加Modal2的内容 */}
</div>
);
};
export default Modal2;
import React from 'react';
import Modal1 from './Modal1';
const App = () => {
return (
<div>
{/* 在这里添加其他内容 */}
<Modal1 />
</div>
);
};
export default App;
通过以上步骤,当点击Modal1组件中的按钮时,Modal2组件将会显示出来。你可以根据实际需求,在Modal2组件中添加所需的内容和样式。
腾讯云相关产品和产品介绍链接地址:
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云