作者：arashilan | 来源：互联网 | 2023-07-27 23:23
JSXHTML语言直接写在JavaScript语言之中，不加任何引号，这就是JSX的语法，它允许HTML与JavaScript的混写。varnames[Alice,Emily,Ka
JSX
HTML 语言直接写在 Javascript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 Javascript 的混写。
var names = ['Alice', 'Emily', 'Kate'];
React.render(
{
names.map(function (name) {
return
Hello, {name}!
})
}
document.getElementById('example')
);
上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 <开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 Javascript 规则解析。JSX 允许直接在模板插入 Javascript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员:
var arr = [
Hello world!
,
React is awesome
,
];
React.render(
{arr}
,
document.getElementById('example')
);
Transfer
JSX编译器的核心是将基于XML的语言编译成JS代码，主要是依赖于React.createElment函数。
var Nav;
// Input (JSX):
var app = ;
// Output (JS):
var app = React.createElement(Nav, {color:"blue"});
var Nav, Profile;
// Input (JSX):
var app = ;
// Output (JS):
var app = React.createElement(
Nav,
{color:"blue"},
React.createElement(Profile, null, "click")
);
Javascript Expressions
属性表达式
如果需要在HTML中混入Javascript变量值，需要利用{}来代替&＃8221;&＃8221;。
// Input (JSX):
var person = ;
// Output (JS):
var person = React.createElement(
Person,
{name: window.isLoggedIn ? window.name : ''}
);
Boolean Attributes
// These two are equivalent in JSX for disabling a button
;
;
// And these two are equivalent in JSX for not disabling a button
;
;
Child Expressions
// Input (JSX):
var cOntent= {window.isLoggedIn ? : };
// Output (JS):
var cOntent= React.createElement(
Container,
null,
window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);
Comments：注释
JSX 里添加注释很容易；它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 {} 包围要注释的部分。
var cOntent= (
);
Multiple Case
If-Else
在JSX中是不可以直接在{}中加入if-else的，可以使用下面这种三元表达式：
React.render(Hello World!
, mountNode);
不过三元表达式往往并不能满足需求，React建议的方式是在JS代码中使用if表达式：
var loginButton;
if (loggedIn) {
loginButton = ;
} else {
loginButton = ;
}
return (
);
Show-Hide
render: function() {
return (
This will be hidden if you set props.shouldHide
to something truthy.
);
}
Switch-Case
return (
Color
Name
{this.state.color || "white"}
Hex
{(() => {
switch (this.state.color) {
case "red": return "#FF0000";
case "green": return "#00FF00";
case "blue": return "#0000FF";
default: return "#FFFFFF";
}
})()}
);
Loop：循环
var rows = [];
for (var i=0; i rows.push();
}
return {rows};
京公网安备 11010802041100号