React 基础巩固(七)——JSX 的基本语法
JSX 是什么?
- JSX 是一种 JS 的语法扩展(extension),也可以称之为 JavaScript XML,因为看起来就是一段 XML 语法
- 它用于描述我们的 UI 界面,并且其可以和 JS 融合在一起使用
- 它不同于 Vue 中的模块语法,不需要专门学习模块语法中的指令
为什么 React 选择了 JSX?
-
React 认为
渲染逻辑
本质上与其他UI逻辑
存在内在耦合文章来源:https://www.toymoban.com/news/detail-496224.html- 比如 UI 需要绑定事件
- 比如 UI 中需要展示数据状态
- 比如在某些状态发生改变时,又需要改变 UI
-
他们之间是密不可分的,所以 React 没有将标记分离到不同的文件中,而是将它们组合到了一起,这个地方就是组件(Component)文章来源地址https://www.toymoban.com/news/detail-496224.html
JSX 的书写规范
- JSX 的顶层只能有一个根元素,所以通常在外层包裹一个
div元素
- 为了方便阅读,通常在 JSX 的外层包裹一个小括号
()
,并且 JSX 可以进行换行书写 - JSX 中的标签可以是单标签,也可以是双标签(如果是单标签,则必须以
/>
结尾)
// [书写规范]
// 1.JSX的顶层只能有一个根元素,所以通常在外层包裹一个div元素
// 2.为了方便阅读,通常在JSX的外层包裹一个小括号`()`,并且JSX可以进行换行书写
// 3.JSX中的标签可以是单标签,也可以是双标签(如果是单标签,则必须以`/>`结尾)
return (
<div>
<h2>hello world</h2>
<br />
<h2>hello react</h2>
</div>
);
JSX 的注释编写
return (
<div>
<h2>注释编写</h2>
{/* JSX 的注释写法 */}
</div>
);
JSX 中插入子元素不同类型的处理
- JSX 嵌入变量作为子元素
- 1.当变量是 Number、String、Array 类型时,可以直接显示
- 2.当变量是 null、undefined、Boolean 类型时,内容为空
- 若要显示,需转为字符串
- 转换方式:toString、拼接空字符串、String()等方式
- 3.Object 对象类型不能作为子元素
<script type="text/babel">
// 1.创建root
const root = ReactDOM.createRoot(document.querySelector("#root"));
// 2.封装App组件
class App extends React.Component {
// 组件数据
constructor() {
super();
this.state = {
count: 100,
message: "hello world",
names: ["a", "b", "c"],
udf: undefined,
nl: null,
bl: true,
obj: { name: 'outman'}
};
}
// 渲染内容
render() {
const { message, names, count } = this.state;
const { udf, nl, bl } = this.state;
const { obj } = this.state;
return (
<div>
{/* Number/String/Array 直接显示 */}
<h2>{count}</h2>
<h2>{message}</h2>
<h2>{names}</h2>
{/* undefined/null/Boolean 显示为空 */}
<h2>{udf}</h2>
<h2>{nl}</h2>
<h2>{bl}</h2>
{/* 转为字符串,可以显示 */}
<h2>{String(udf)}</h2>
<h2>{nl + ""}</h2>
<h2>{bl.toString()}</h2>
{/* Object类型不可作为子元素显示 (Objects are not valid as a React child) */}
<h2>{obj}</h2>
{/* 可取属性值展示 */}
<h2>{obj.name}</h2>
</div>
);
}
}
// 3.渲染组件
root.render(<App />);
</script>
JSX 中嵌入不同表达式
<script type="text/babel">
// 1.创建root
const root = ReactDOM.createRoot(document.querySelector("#root"));
// 2.封装App组件
class App extends React.Component {
// 组件数据
constructor() {
super();
this.state = {
firstName: "outman",
lastName: "chen",
age: 20,
movies: ["星际穿越", "流浪地球", "独行月球", "大话西游", "火星救援"],
};
}
getMoviesList() {
const liEls = this.state.movies.map((movie) => <li>{movie}</li>);
return liEls;
}
// 渲染内容
render() {
const { firstName, lastName, age } = this.state;
const fullName = "fullName:" + firstName + " " + lastName;
const ageText = age >= 18 ? "成年人" : "未成年人";
const liEls = this.state.movies.map((movie) => <li>{movie}</li>);
return (
<div>
{/* 运算表达式 */}
<h3>{10 + 10}</h3>
<h3>{firstName + " " + lastName}</h3>
<h3>{fullName}</h3>
{/* 三元运算符 */}
<h3>{ageText}</h3>
<h3>{age >= 18 ? "成年人" : "未成年人"}</h3>
{/* 执行一个函数 */}
<ul>{liEls}</ul>
<ul>
{this.state.movies.map((movie) => (
<li>{movie}</li>
))}
</ul>
<ul>{this.getMoviesList()}</ul>
</div>
);
}
}
// 3.渲染组件
root.render(<App />);
</script>
到了这里,关于【前端知识】React 基础巩固(七)——JSX 的基本语法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!