上一节的代码, HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写(查看 Demo02
)。
var names = [‘Alice‘, ‘Emily‘, ‘Kate‘]; ReactDOM.render( <div> { names.map(function (name) { return <div>Hello, {name}!</div> }) } </div>, document.getElementById(‘example‘) );
上面代码体现了 JSX 的基本语法规则:遇到 HTML 标签(以<
开头),就用 HTML 规则解析;遇到代码块(以{
开头),就用 JavaScript 规则解析。上面代码的运行结果如下。 JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员(查看demo03
)。
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById(‘example‘)
);
时间: 2024-10-12 14:53:54