鸿蒙arkts中自定义弹窗

### 创建和使用鸿蒙 ArkTS 自定义弹窗组件 #### 定义自定义弹窗组件 为了在鸿蒙 ArkTS 中创建自定义弹窗，首先需要构建一个新的组件来表示这个弹窗。这可以通过继承 `Component` 类并重写其方法来完成。 ```typescript import { Component } from '@ohos/arkui'; class CustomDialog extends Component { constructor(props) { super(props); this.state = { visible: false, }; } show() { this.setState({ visible: true }); } hide() { this.setState({ visible: false }); } render() { const style = this.state.visible ? 'visible' : 'hidden'; return ( <div class={`dialog ${style}`}> {/* Dialog content goes here */} <button onClick={() => this.hide()}>Close</button> </div> ); } } ``` 上述代码展示了如何通过设置状态变量控制弹窗显示与否[^1]。 #### 使用自定义弹窗组件 一旦完成了自定义弹窗组件的设计，在页面或其他父级组件中就可以轻松调用它了： ```typescript import React, { useState } from 'react'; // Import the custom dialog component defined above. import CustomDialog from './CustomDialog'; function App() { const [isModalVisible, setIsModalVisible] = useState(false); function showModal() { setIsModalVisible(true); } function handleOk() { console.log('Clicked ok button'); setIsModalVisible(false); } function handleCancel() { console.log('Clicked cancel button'); setIsModalVisible(false); } return ( <> <Button type="primary" onClick={showModal}> Open Modal with Custom Footer </Button> <CustomDialog title="Title Text" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} > Some contents... </CustomDialog> </> ); } ``` 这段代码片段说明了怎样引入之前创建好的 `CustomDialog` 组件，并且提供了展示与隐藏该对话框的方法。