JSX核心语法

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.png

3、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