JSX简介
const element = <h1>Hello, world!</h1>;
这个html标签和js的结合体就是JSX,JavaScript的扩展语法。在React中JSX会被创建React元素,并最终渲染成DOM元素。JSX将html写在js中,也就是UI和事件整合成一个更小的整体(也就是后面的要学的组件)。传统的方式都是Html、CSS、JavaScript分开写的,vue中常用的模板方式中也是在一个文件中分开写(template、script、style)。React的设计哲学认为所有的代码都是可以写到js中,all-in-js。这样相比分离的写法可以很简洁的创建一个组件,相比vue的组件会更加灵活便捷。
JSX嵌入表达式
const msg = "Hello React!";
const ele = <h1>{msg}</h1>
ReactDOM.render(
ele,
document.getElementById("root")
)
在这个例子中声明了一个文本变量msg
,并使用大括号{}包裹这个变量。JSX中一律使用大括号{}包裹表达式,表达式一定要是合法的JavaScript表达式。下面列举几种常用的形式
1、字面量
const name = "James";
const ele = <h2>Hello {name}!</h2>
2、数学表达式
const ele = <h2>{3 * 6}</h2>
3、函数调用
const user = {
firstName: "Dany",
lastName: "Green"
}
function format(aUser) {
return aUser.firstName + ' ' + aUser.lastName
}
const ele = <h2>{format(user)}</h2>
4、三目运算
const isLogin = false;
const ele = <h2>{!isLogin ? "登录" : "欢迎回来~"}</h2>
JSX也可以作为表达式
JSX编译之后生成JavaScript函数,调用该函数会返回一个JavaScript对象。因此JSX可以作为一个参数和返回值使用。JSX作为一个变量使用已经在上面的例子见过了。
// 作为返回值
function getGreeting(user) {
if (user) {
return <h1>Hello, {format(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
作为参数
// 作为参数
function greeting(user) {
return <div style={{ display: 'flex' }}>Hello, {user}</div>
}
const name = "James";
const user = (
<div style={{ display: 'flex' }}>
<h2>{name}</h2>
<img src={avatarUrl} style={{ width: 100, height: 100, borderRadius: '50%' }} />
</div>
)
ReactDOM.render(
greeting(user),
document.getElementById("root")
)
JSX 特定属性
const avatarUrl = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598435934705&di=d1629d7ac009896c4118297e1a05f5ce&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201707%2F10%2F20170710210234_y3Kf5.jpeg"
const ele = <img src={avatarUrl} style={{ width: 100, height: 100, borderRadius: '50%' }} />
src后面不能使用引号包裹住花括号{},也不能在花括号中使用双引号包裹变量。
不允许
src="{avatarUrl}"
不允许
src={"avatarUrl"}
JSX中的注释
class App extends React.Component {
render() {
return (
<div>
{/* 我是一段注释 */}
<h2>Hello World</h2>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById("root"))
JSX中嵌入数据
1、可以正常显示的数据类型有String,Number,Array等
class App extends React.Component {
constructor() {
super()
this.state = {
name: "James",// String
age: 18, // Number
names: ["abc", "cba", "nba"] // Array
}
}
render() {
return (
<div>
<h3>{this.state.name}</h3>
<h3>{this.state.age}</h3>
<h3>{this.state.names}</h3>
</div>
)
}
}
2、对象不能作为JSX住的子类
class App extends React.Component {
constructor() {
super()
this.state = {
user: {
name: 'Kobe',
age: 40
}
}
}
render() {
return (
<div>
{this.state.user}
</div>
)
}
}
直接报错<u>Uncaught Error: Objects are not valid as a React child (found: object with keys {name, age}). If you meant to render a collection of children, use an array instead.</u>,如下:
WX20200826-154138@2x.png3、Boolean、null、undefined不能渲染出来内容
class App extends React.Component {
constructor() {
super()
this.state = {
test1: null, // null
test2: undefined, // undefined
test3: true, // Boolean
flag: true,
}
}
render() {
return (
<div>
<h3>test1 : {this.state.test1}</h3>
<h3>test1 : {this.state.test2}</h3>
<h3>test1 : {this.state.test3}</h3>
<h3>flag : {this.state.flag}</h3>
</div>
)
}
}
显示效果图如下
WX20200826-154845@2x.png
可以通过+ ""
显示
render() {
return (
<div>
<h3>test1 : {this.state.test1 + ""}</h3>
<h3>test1 : {this.state.test2 + ""}</h3>
<h3>test1 : {this.state.test3 + ""}</h3>
<h3>flag : {this.state.flag + ""}</h3>
</div>
)
}
显示效果如下:
WX20200826-155118@2x.png
网友评论