css：

.dialog-border-red { width: 400px; height: auto; border-width: 2px 8px 8px 2px; border-style: solid; border-color: red; margin: 8px auto; padding: 8px;}.dialog-title { text-align: left; color: blue;}.dialog-message { text-align: center; color: green;}.dialog-info { font-style: italic; text-align: left; color: yellow;}import React from "react";import './css/composed.css';const infoMap = { welcomeInfo: '欢迎', greetInfo: '谢谢访问！', attentionInfo: '提示信息', detailInfo: '请阅读详细内容', welcomeDialogInfo: '自定义Dialog类型：WelcomeDialog', infoDialogInfo: '自定义Dialog类型：InfoDialog'}function MyDialogBox(props) { return ( <divName={'dialog-border-' + props.color}> {props.children} </div> );}function WelcomeDialog(){ return ( <MyDialogBox color="red"> <h3Name="dialog-title">{infoMap.welcomeInfo}</h3> <pName="dialog-message">{infoMap.greetInfo}</p> </MyDialogBox> );}function InfoDialog(){ return ( <MyDialogBox color="red"> <h3Name="dialog-title">{infoMap.attentionInfo}</h3> <pName="dialog-message">{infoMap.detailInfo}</p> </MyDialogBox> );}function MyDialog(props) { const dType = props.dlgType; if (dType) { alert(infoMap.welcomeDialogInfo); return <WelcomeDialog />; } else { alert(infoMap.infoDialogInfo); return <InfoDialog />; }}const ComposedExample = () => { return ( <span> <MyDialog dlgType={true}/> </span> );}export default ComposedExample;

效果：