React.js 中深入了解 JSX

JSX 最终使用 createElement 方法创建 React 元素。

示例

<FormButton color="green" buttonSize={10}> Submit </FormButton>

将转换为 -

React.createElement(
   FormButton,
   {color: 'green', buttonSize: 10},
   'Submit’
)

也可以添加自闭合标签。

自定义 React 元素的首字母大写

自定义 React 元素必须以大写字母开头命名，以便 React 区分 html 元素和 React 元素。

由于 Jsx 会转换为 React.createElement，因此 React 库必须在作用域内。为此，如果 jsx 需要使用，我们必须导入 React。

使用点运算符访问内部属性

可以使用点运算符访问元素的内部属性。

示例

<FormComponent.TextArea size=”50”/>

运行时选择 Jsx 元素的类型

一般表达式不能用于 React 元素的类型。首先我们必须将其分配给一个大写变量，然后才能使用该变量。

示例

import React from 'react';
import { Cricket, Football } from './sportsTypes';
const components = {
   cricket: Cricket,
   football: Football
};
function Story(props) {
   // Below expression is wrong and cannot be used this way.
   return <components[props.cricket] player={props.name} />;
}

为了使其工作，我们将将其分配给一个大写字母 -

import React from 'react';
import { Cricket, Football } from './sportsTypes';
const components = {
   cricket: Cricket,
   football: Football
};
function Story(props) {
   // Correct! JSX type can be a capitalized variable.
   const Sport = components[props.cricket];
   return <Sport player={props.name} />;
}

JSX 中的 Props 使用

Props 可以是 jsx 表达式

示例

<Player score={4+6+4} />

score 属性将计算为 14

像 if、for 这样的条件语句不能直接在 jsx 代码中使用，但它们可以单独使用，并且它们的结果变量可以在 jsx 中使用。

Props 可以是字符串字面量 -

<Player name={‘Steve’}/>

或者

<Player name=”Steve”/>

如果未提供，props 值将默认为 true。这仅仅是为了与 html 的默认行为兼容。

示例

<Player isPlaying />

等于

<Player isPlaying={true} />

可以使用扩展运算符传递 props -

<Player {…props} />

JSX 中的子元素

开始标签和结束标签之间的内容是 jsx 子元素。

<Player> Steve </Player>

子元素也可以是 jsx 表达式或函数。如果 jsx 子元素属于布尔值 null、undefined 类型，则它们将被忽略。

Shyam Hande

更新于: 2019 年 9 月 5 日

251 次查看

开启您的 职业生涯

通过完成课程获得认证

开始学习