jsx怎么往js里传参数_JSX语法使用详解——终极版

一、基础

1、JSX是什么

JSX是一种像下面这样的语法：

const element =

Hello, world!

;

它是一种JavaScript语法扩展，在React中可以方便地用来描述UI。

本质上，JSX为我们提供了创建React元素方法(React.createElement(component, props, ...children))的语法糖(syntactic sugar)。上面的代码实质上等价于：

var element = React.createElement(

"h1",

null,

"Hello, world!"

);

2、JSX代表JS对象

JSX本身也是一个表达式，在编译后，JSX表达式会变成普通的JavaScript对象。

你可以在if语句或for循环中使用JSX，你可以将它赋值给变量，你可以将它作为参数接收，你也可以在函数中返回JSX。

例如下面的代码：

function getGreeting(user) {

if (user) {

return

Hello, {formatName(user)}!

;

}

return

Hello, Stranger.

;

}

上面的代码在if语句中使用JSX，并将JSX作为函数返回值。实际上，这些JSX经过编译后都会变成JavaScript对象。

经过babel会变成下面的js代码：

function test(user) {

if (user) {

return React.createElement(

"h1",

null,

"Hello, ",

formatStr(user),

"!"

);

}

return React.createElement(

"h1",

null,

"Hello, Stranger."</