数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究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 类型，则它们将被忽略。
更新于: 2019 年 9 月 5 日
251 次查看
广告