CSS:

body{ text-align: center;}div#root{ position: relative; width: 400px; height: auto; border: 0px solid black; margin: 8px auto; padding: 8px; text-align: center;}.dialogBorder-gray { border-width: 2px 8px 8px 2px; border-style: solid; border-color: #ccc; margin: 8px auto; padding: 8px;}.dialog-title { text-align: left;}.dialog-message { text-align: center;}import React from "react";import './css/class-compose.css';const infoMap = { confirmInfo: '您刚刚点击了“确定”按钮。', cancelInfo: '您刚刚点击了“取消”按钮。', titleInfo: '确认', selectInfo: '请确认您的选择。', btnConfirmValue: '确定', btnCancelValue: '取消'}function DialogBox(props){ return ( <divName={'dialogBorder-' + props.color}> {props.children} </div> );}function Dialog(props) { return ( <DialogBox color='gray'> <h3Name="dialog-title">{props.title}</h3> <pName="dialog-message">{props.message}</p> {props.children} </DialogBox> );}class ConfirmDialog extends React.Component { constructor(props){ super(props); this.handleConfirmClick = this.handleConfirmClick.bind(this); this.handleCancelClick = this.handleCancelClick.bind(this); } handleConfirmClick(event) { alert(infoMap.confirmInfo); } handleCancelClick(event) { alert(infoMap.cancelInfo); } render() { return ( <Dialog title={infoMap.titleInfo} message={infoMap.selectInfo}> <button onClick={this.handleConfirmClick}>{infoMap.btnConfirmValue}</button> <button onClick={this.handleCancelClick}>{infoMap.btnCancelValue}</button> </Dialog> ); }}const ClassComposeExample = () => { return ( <span> <ConfirmDialog/> </span> );}export default ClassComposeExample;

效果: