React之JSX

心已赠人 2022-04-16 03:46 292阅读 0赞

**React JSX**  
React 使用 JSX 来替代常规的 JavaScript。  
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。  
我们不需要一定使用 JSX，但它有以下优点：

*  JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
 *  它是类型安全的，在编译过程中就能发现错误。
 *  使用 JSX 编写模板更加简单快速。

**在 JSX 中使用表达式**  
你可以任意地在 JSX 当中使用 JavaScript 表达式，在 JSX 当中的表达式要包含在大括号里。

例如 1 + 1， user.firstName， 以及 formatName(user) 都是可以使用的。

class App extends Component {
      render() {
        return (
          <h1>{1+1}</h1>
        );
      }
    }

在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false.

class App extends Component {
      render() {
        return (
          <div>
          	<h1>{i === 1 ? 'True!' : 'False'}</h1>
          </div> 
        );
      }
    }

**样式**  
React 推荐使用内联样式，可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：

var myStyle = {
      fontSize: 100,
      color: '#FF0000'
    }; 
    
    class App extends Component {
      render() {
        return (
          <h1 style = {myStyle}>Hello World！！！</h1>
        );
      }
    }

**注释**  
注释需要写在花括号中，实例如下：

class App extends Component {
      render() {
        return (
          //element
          <div>
            <h1>Hello world</h1>
            {/*注释...*/}
         </div>
        );
      }
    }

**数组**  
JSX 允许在模板中插入数组，数组会自动展开所有成员：

var arr = [
      <h1>apple</h1>,
      <h2>huawei</h2>,
    ];
    
    class App extends Component {
      render() {
        return (
          //element
          <h1>{arr}</h1>
        );
      }
    }