React-JSX综合应用示例 react jss

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;

运行后页面：