赞
踩
JSX 全称 JavaScript XML,是React 定义的一种类似于 XML 的 JS 扩展语法:JS + XML
本质是 React.createElement(component, props, ...children) 方法的语法糖。 用于简化创建虚拟 DOM,
写法:var ele = <h1>Hello JSX!</h1>。
注意,它不是字符串,也不是 HTML/XML 标签。它最终产生的是一个 JS 对象。
JSX是一种JavaScript的语法扩展(eXtension),
也在很多地方称之为JavaScript XML,因为看起就是一段XML语法;
React认为渲染逻辑本质上与其他UI逻辑存在内在耦合
比如UI中需要展示数据状态,在某些状态发生改变时,又需要改变UI;
我们只需要知道,JSX其实是嵌入到JavaScript中的一种结构语法
关于标签首字母
1.若首字母小写,那么React就会去寻找与之同名的html标签
若找见,直接转为html同名元素
若未找见,报错
2. 若首字母大写,那么React就会去寻找与之同名的组件
若找见,那么就是用组件
若未找见,报错
// 需要大括号包裹双斜杠星星**
{/* 我是一段注释 */}
情况一:当变量是Number、String、Array类型时,可以直接显示
情况二:当变量是null、undefined、Boolean类型时,内容为空;
如果希望可以显示null、undefined、Boolean,那么需要转成字符串;
转换的方式有很多,比如toString方法、和空字符串拼接,String(变量)等方式;
情况三:对象类型不能作为子元素(not valid as a React child)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"></div> <script src="../react/react.development.js"></script> <script src="../react/react-dom.development.js"></script> <script src="../react/babel.min.js"></script> <script type="text/babel"> class App extends React.Component { constructor(props) { super(props); this.state = { // 1.在{}中可以正常显示显示的内容 name: "why", // String age: 18, // Number names: ["abc", "cba", "nba"], // Array // 2.在{}中不能显示(忽略) test1: null, // null test2: undefined, // undefined test3: true, // Boolean flag: true, // 3.对象不能作为jsx的子类 friend: { name: "kobe", age: 40, }, }; } render() { return ( <div> {/* 1.本身就显示的*/} <h2>{this.state.name}</h2> <h2>{this.state.age}</h2> <h2>{this.state.names}</h2> {/* 2.本身就不能显示的*/} <h2>{this.state.test1}</h2> <h2>{this.state.test2}</h2> <h2>{this.state.test3}</h2> {/* 3.将不能显示的转变成可以显示的*/} <h2>{this.state.test1 + ""}</h2> <h2>{this.state.test2 + ""}</h2> <h2>{this.state.test3.toString()}</h2> <h2>{this.state.flag ? "你好啊" : null}</h2> {/* 4.对象不能作为jsx的子类--报错*/} <h2>{this.state.friend}</h2> </div> ); } } ReactDOM.render(<App />, document.getElementById("app")); </script> </body> </html>
运算表达式
三元运算符
执行一个函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"></div> <script src="../react/react.development.js"></script> <script src="../react/react-dom.development.js"></script> <script src="../react/babel.min.js"></script> <script type="text/babel"> class App extends React.Component { constructor(props) { super(props); this.state = { firstname: "kobe", lastname: "bryant", isLogin: false, }; } render() { // 对象的解构 const { firstname, lastname, isLogin } = this.state; return ( <div> {/*1.jsx里面可以放入各种表达式,这里只是举例几个 */} {/*1.运算符表达式*/} <h2>{firstname + " " + lastname}</h2> <h2>{20 * 50}</h2> {/*2.三元表达式*/} <h2>{isLogin ? "欢迎回来~" : "请先登录~"}</h2> {/*3.进行函数调用*/} <h2>{this.getFullName()}</h2> </div> ); } getFullName() { return this.state.firstname + " " + this.state.lastname; } } ReactDOM.render(<App />, document.getElementById("app")); </script> </body> </html>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。