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: bisque; margin: 8px auto; padding: 8px;}.dialog-title { text-align: left; color: black;}.dialog-message { text-align: center; color: blue;}import React from "react";import './css/relation.css';const infoMap = { welcomeInfo : '欢迎', greetInfo: '谢谢访问'}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> </DialogBox> );}function WelcomeDialog() { return ( <Dialog title={infoMap.welcomeInfo} message={infoMap.greetInfo} /> )}const RelationExample = () => { return ( <span> <WelcomeDialog/> </span> );}export default RelationExample;

效果：