在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) {
   //下面的表达式是错误的，不能以这种方式使用。
   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) {
   //正确！JSX类型可以是大写的变量。
   const Sport = components[props.cricket];
   return <Sport player={props.name} />;
}

jsx中的道具用法

道具可以是jsx表达式

示例

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

得分道具将计算为14

条件语句（如if，for）不能直接在jsx代码中使用，但可以单独使用，其结果变量可以在jsx中使用。

道具可以是字符串文字-

<Player name={‘Steve’}/>

要么

<Player name=”Steve”/>

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

示例

<Player isPlaying />

等于

<Player isPlaying={true} />

散布算子可以用来传递道具-

<Player {…props} />

jsx中的Children元素

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

<Player> Steve </Player>

子代也可以是jsx表达式或函数。如果jsx子级属于Boolean null，undefined类型，则将忽略它们。