import React from "react";// infoMap中的内容均为字符串形式，用于输出提示信息const infoMap = { BritainClubName: '曼彻斯特城足球俱乐部', ManchesterCityFCAge: 144, ItalyClueName: '尤文图斯足球俱乐部', JuventusFCAge: 127, ageUnit: '岁', font20: 20, bold: 'bold', red: 'red', font12: 12, italic: 'italic', noClubInfo: '没有俱乐部信息', titleInfo: 'JSX简单示例', textExample: '直接显示文本示例：Hello Club!', expressionInput: '表达式输入示例：使用大括号{}表示表达式，例如{3+6}=', conditionInput: '条件输入示例：使用三元运算符，例如{infoMap.ItalyClueName}已经{infoMap.JuventusFCAge}{infoMap.ageUnit}，{infoMap.JuventusFCAge > infoMap.ManchesterCityFCAge ? "比" + infoMap.BritainClubName + "早" : "比" + infoMap.BritainClubName + "晚"}返回的结果为：', objectInput: '对象表达式示例：例如"{objectClub.name} {objectClub.age}岁"的返回结果为：', functionInput: '函数表达式示例：例如"{formatClubInfo(objectClub)}"的返回结果为："', functionWithArgsInput:'有参数的增强函数表达式示例：例如"{chooseClubInfo(objectClub)}"的返回结果为："', functionNoArgsInput: '无参数的增强函数表达式示例：例如"{chooseClubInfo()}"的返回结果为："', arrayInput: '数组表达式示例：例如"{arrayClubInfo}"的返回结果为：', jsxContentForStyle1: '样式表达式示例1：此处为style1，请注意style1和style2的字体大小区别', jsxContentForStyle2: '样式表达式示例2：此处为style2，请注意style1和style2的字体大小区别', correctCommentInput: '注释表达式示例：注释的外部也要用大括号括起来，即注释也是一种表达式：例如{/* a+b=1 */}"为正确注释方式', errorCommentInput: '而/* a+b=1 */为错误注释方式',}// 自定义结构、函数(组件)等const objectClub = { name: infoMap.BritainClubName, age: infoMap.ManchesterCityFCAge,}// 构建数组，现在更加清晰和安全const arrayClubInfo = [ <span key="italy-clue-name">{infoMap.ItalyClueName}</span>, <span key="juventus-fc-age">{infoMap.JuventusFCAge}</span>, <span key="age-unit">{infoMap.ageUnit}</span>];function formatClubInfo(clubInfo) { return clubInfo.name + "已经" + clubInfo.age + infoMap.ageUnit;}function chooseClubInfo(clubInfo) { if (clubInfo){ return formatClubInfo(clubInfo); } else { return infoMap.noClubInfo; }}const css_p_lg = { fontSize: infoMap.font20, fontStyle: infoMap.bold, color: infoMap.red};const css_p_sm = { fontSize: infoMap.font12, fontStyle: infoMap.italic, color: infoMap.blue}// 指明渲染的内容const JsxExample = () => { return( <span> {/*请注意像此处标签内容的JSX代码里编写注释时必须采用"{、}"方式 */} {/*请将此处代码和输出结果对照，加强对JSX语法的学习 */} <h2>{infoMap.titleInfo}</h2> <h3>{infoMap.textExample}</h3> <hr/> {/*对于大括号中的表达式，按照对应语法进行处理，例如3+6=9,用来输出表达式计算结果 */} <h3>{infoMap.expressionInput} {3+6}</h3> <hr/> <h3>{infoMap.conditionInput} {infoMap.ItalyClueName}已经{infoMap.JuventusFCAge}{infoMap.ageUnit}，{infoMap.JuventusFCAge > infoMap.ManchesterCityFCAge ? "比" + infoMap.BritainClubName + "早" : "比" + infoMap.BritainClubName + "晚"}</h3> <hr/> <h3>{infoMap.objectInput} {'"'} {objectClub.name} {objectClub.age}{ '岁"'}</h3> <hr/> <h3>{infoMap.functionInput} {formatClubInfo(objectClub)} {'"'}</h3> <hr/> <h3>{infoMap.functionWithArgsInput} {chooseClubInfo(objectClub)} {'"'}</h3> <hr/> <h3>{infoMap.functionNoArgsInput} {chooseClubInfo()} {'"'}</h3> <hr/> <h3>{infoMap.arrayInput} {arrayClubInfo} {'"'}</h3> <hr/> <h3 style={css_p_lg}>{infoMap.jsxContentForStyle1}</h3> <hr/> <h3 style={css_p_sm}>{infoMap.jsxContentForStyle2}</h3> <hr/> <h3>{infoMap.correctCommentInput} {/* This is a right JSX Comment Expression.*/}</h3> <h3>{infoMap.errorCommentInput}</h3> </span> );};export default JsxExample;

运行后页面：