JSX基础语法

(1) JSX 简介

JSX 是 React 提供的一种语法糖，它允许我们在 JavaScript 中编写 HTML 标签。JSX 全称 JavaScript Extension。

const element = <h1>Hello, world!</h1>;

(2) JSX 使用

声明表达式和变量

• 在JSX语法中 声明表达式和变量必须用 {}包裹起来,否则会报错。

const name = "John Perez";

const element = <h1> hello,{name}</h1>;

ReactDOM.render(element, document.getElementById("root"));

在 JSX 语法中你可以在大括号中放置任何有效的 JS 表达式例如 2+2,firstName 或者 formatName(user) 都是有效的 JS 表达式

• 下面的例子中我们将 formatName(user)，并将结果嵌套在 h1 元素中

function formatName(user) {
  return user.firstname + " " + user.lastname;
}
const user = {
  firstname:"John",
  lastname:"smisth"
}
const element = {
  <h1>
    Hello,{formatName(user)}!
  </h1>
}
ReactDOM.render(
  element,
  document.getElementById("root")
)

在编译后 JSX 表达式会被转为普通的函数调用,并且会得到 JS 对象,也就是说里面必须有 return 语句

区分引号和大括号

• 通过引号将属性值变成字符串

const element = <div tabIndex="0"></div>;

• 通过大括号将属性值变成表达式

const element = <img src={user.img}></img>;

千万记得大括号或者引号只能使用其中的一个,引号就表示字符串,大括号就表示变量,对同一属性就不能同时使用这两种符号

使用JSX 指定子元素

• 假如一个标签里面没有内容,你可以使用 />来闭合标签,就像 xml 语法一样

const element = <img src={user.imgurl} />;

• JSX 标签里包含很多子元素(必须有包裹层)

const element = () => {
  return (
    <div>
      <h1>Hello</h1>
      <h2>Good to see you </h2>
    </div>
  );
};

你也可以把最外层的div换成 <>,</>

(3)注意事项

类名

• 在JSX语法中,类名必须用 className属性来指定,不能用 class属性,命名方式是小驼峰法则

包裹层

• 如果JSX语法中,有多个根元素,你必须用 <>,</>包裹起来,否则会报错

布尔值渲染不了

• 在JSX语法中,布尔值不能直接渲染,比如 {true},在页面上无法渲染出来
• 在JSX语法中,返回值是 null,不会被渲染