react js文件中一个变量可以赋值一个HTML片段,函数也可以return一个HTML片段,不符合es6语法呀?

74 阅读1分钟
react js文件中一个变量可以赋值一个HTML片段,函数也可以return一个HTML片段,不符合es6语法呀?

在React中,我们可以将HTML片段赋值给一个变量,或者在函数中返回HTML片段。这是因为React使用了一种名为JSX的语法扩展,它允许我们在JavaScript中编写类似HTML的代码。这并不违反ES6语法,因为JSX最终会被转译为标准的JavaScript代码。  
例如,以下是一个简单的React组件,它返回一个HTML片段:  
function Welcome() {
  return <h1>Helloworld!</h1>;
}
在这个例子中,<h1>Helloworld!</h1>就是一个HTML片段,它被返回了出来。这段代码在经过Babel等工具的转译后,会变成以下的JavaScript代码:
function Welcome() {
  return React.createElement('h1', null, 'Hello, world!');
}
所以,虽然在React中我们看到的代码可能看起来像是在违反ES6的语法规则,但实际上它们都是合法的JavaScript代码。