React翻译官网文档之JSX

Posted 2020-09-10

 

什么是JSX？ 看下面的代码它被称为JSX，它既不是字符串也不是html，而是一种facebook公司对javascript语法的拓展。虽然写法很奇怪最终仍会会被编译为javascript代码

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

 

你可以在JSX中嵌入任何javascript表达式，看下面的例子。

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语法中{} 接收表达式并进行运算，打开codepen在刚才的代码中，进行如下修改看看代码运行结果

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

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

const element = (
  <h1>
   {getGreeting(user)}
  </h1>
);
function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
};
ReactDOM.render(
  element,
  document.getElementById(‘root‘)
);