React文档介绍JSX

Posted 2020-08-30

我们先看看这个变量声明：

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

这个有趣的标签语法既不是字符串也不是html。

这种写法叫做JSX，这是一种对js语法的扩展。我们建议使用这种语法和React配合去描述UI本来应该的样子。JSX也许会让你想到模板语言，但是它拥有js的强大支持是与生俱来的。

JSX生产React“元素”。我们会在下一章讲解将这些React元素渲染到DOM中。下面，你可以来看看JSX的基础知识来起步。

在JSX中嵌入表达式

你可以在JSX中嵌入任何使用大括号包裹起来的js表达式。

举个例子，2+2，user.name还有formatName(user)都是有效的表达式：

function formatName(user) {
  return user.firstName + ‘ ‘ + user.lastName;
}

const user = {
  firstName: ‘Harper‘,
  lastName: ‘Perez‘
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

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

在CodePen里试一试。

我们把JSX代码分割成多行，这样可读性好。即使不需要，但当这样做地时候，我们同样建议将它包裹在圆括号里避免意想不到的错误。

JSX也是一种表达式

JSX表达式在编译之后会变成规则的js对象。

这表示你可以将JSX放在if条件语句中或者for循环中，把它们赋值给变量，将他们作为函数的参数，也可以在函数中作为返回值：

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

在JSX中指定属性

有时你会使用引用来指定字符串字面量作为属性：

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