react之jsx语法

前言

使用过react框架的朋友应该知道其使用的一些语法规格（jsx）与普通的js语法有一些差异，下面我罗列出一些常用的差异语法规范。
本文参考教程链接：https://zh-hans.reactjs.org/docs/jsx-in-depth.html

指定 React 元素类型

React 必须在作用域内

在函数组件中，虽然没有显示使用React库但是仍需将其导入本文件。
如下面示例代码：

import React from 'react';
import CustomButton from './CustomButton';

function WarningButton() {
  return <CustomButton color="red" />;
}

WarningButton的人return语句最后会被编译成如下代码片段：

 return React.createElement(CustomButton, {color: 'red'}, null);

在 JSX 类型中使用点语法

在 JSX 中，可以使用点语法来引用一个 React 组件。当在一个模块中导出许多 React 组件时，这会非常方便。

mport React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

用户定义的组件必须以大写字母开头

不仅仅是自定义组件，所有React组件都是以大写字母开头。
以小写字母开头的元素代表一个 HTML 内置组件，比如 <div> 或者 <span> 会生成相应的字符串 ‘div’ 或者 ‘span’ 传递给 React.createElement（作为参数）。大写字母开头的元素则对应着在 JavaScript 引入或自定义的组件，如 <Foo /> 会编译为 React.createElement(Foo)。

JSX 中的 Props

以下有四种方式可以在 JSX 中指定 props。

JavaScript 表达式作为 Props

可以把包裹在 {} 中的 JavaScript 表达式作为一个 prop 传递给 JSX 元素。
例如，如下的 JSX：

<MyComponent foo={1 + 2 + 3 + 4} />

字符串字面量

可以将字符串字面量赋值给 prop. 如下两个 JSX 表达式是等价的：

<MyComponent message="hello world" />

<MyComponent message={'hello world'} />

Props 默认值为 true

如果没给 prop 赋值，它的默认值是 true。
以下两个 JSX 表达式是等价的：

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

属性展开

如果已经有了一个 props 对象，则可以使用展开运算符 … 来在 JSX 中传递整个 props 对象。
以下两个组件是等价的：

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

JSX 中的子元素

包含在开始和结束标签之间的 JSX 表达式内容将作为特定属性 props.children 传递给外层组件。
以下有5种不同的方法来传递子元素。

字符串字面量

可以将字符串放在开始和结束标签之间，此时 props.children 就只是该字符串。
例如：

<MyComponent>Hello world!</MyComponent>

这是一个合法的 JSX，MyComponent 中的 props.children 是一个简单的未转义字符串 “Hello world!”。因此可以采用编写 HTML 的方式来编写 JSX。如下所示：

<div>This is valid HTML &amp; JSX at the same time.</div>

JSX 子元素

子元素允许由多个 JSX 元素组成。这对于嵌套组件非常有用：

<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>

JavaScript 表达式作为子元素

JavaScript 表达式可以被包裹在 {} 中作为子元素。
例如，以下表达式是等价的：

<MyComponent>foo</MyComponent>

<MyComponent>{'foo'}</MyComponent>

这对于展示任意长度的列表非常有用。例如，渲染 HTML 列表：

function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

函数作为子元素

通常，JSX 中的 JavaScript 表达式将会被计算为字符串、React 元素或者是列表。不过，props.children 和其他 prop 一样，它可以传递任意类型的数据，而不仅仅是 React 已知的可渲染类型。
例如，如果有一个自定义组件，则可以把回调函数作为 props.children 进行传递：

// 调用子元素回调 numTimes 次，来重复生成组件
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );

布尔类型、Null 以及 Undefined 将会忽略

false, null, undefined, and true 是合法的子元素。但它们并不会被渲染。
以下的 JSX 表达式渲染结果相同：

div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

结语

以上就是本文的全部内容，此内容都是有关jsx语法规范的内容，难度不大，只要多加在实操中运用，相信很快就能熟练掌握。