对于React 当中 jsx的理解

React当中,我们使用JSX来指定React里的模板,可以把JSX理解为一个对象,React中可以在三个地方指定jsx,分别是ReactDOM.render()的参数、function组件的返回值和class组件内render函数的返回值,例如:

在写jsx代码的时候推荐用括号把它们给包裹起来,这样可以防止分号自动插入的bug(官网这样说的,具体也不知道是什么bug=.=),

jsx经过babel编译后会转化为一个React.createElement()函数,例如

转化后的结果为:

 writer by:大沙漠 QQ:22969969

React.createElement("div", null, /*#__PURE__*/React.createElement(App, null));

我们可以通过https://babeljs.io/repl这个网站去在线转化jsx,看看转化后的结果是什么

我们可以把jsx赋值给某个变量,又或者作为一个函数的参数去执行,例如:

效果如下:

我们在Show这个function组件内将jsx赋值给一个局部变量p,最后在return的时候进行了拼接。

 

你可能感兴趣的:(对于React 当中 jsx的理解)