8、React JSX 入门与使用指南

React JSX 入门与使用指南

1. JSX 条件逻辑实现

在 JSX 中实现条件逻辑与模板引擎不同，无需特殊语法，直接使用 JavaScript 即可。常用的是三元运算符，因其简洁高效。以下是在 JSX 中实现 if/else 逻辑的几种方式：
- 外部定义变量 ：在 JSX 外部（return 之前）定义变量，然后在 JSX 中用 {} 打印。
- 外部定义表达式 ：在 JSX 外部（return 之前）定义返回值的函数，在 JSX 中用 {} 调用。
- 条件三元运算符 ：简洁的条件判断方式。
- 立即执行函数表达式（IIFE） ：在 JSX 中使用。

示例代码如下：

class MyReactComponent extends React.Component {
    render() {
        // Not JSX: Use a variable and if/else or ternary
        return (
            // JSX: Print result of ternary or expression with {}
        )
    }
}

2. JSX 注释

JSX 中的注释与普通 JavaScript 注释类似。添加 JSX