我们先看看这个变量声明:
const element = <h1>Hello, world!</h1>;
这个有趣的标签语法既不是字符串也不是HTML。
这种写法叫做JSX,这是一种对js语法的扩展。我们建议使用这种语法和React配合去描述UI本来应该的样子。JSX也许会让你想到模板语言,但是它拥有js的强大支持是与生俱来的。
JSX生产React“元素”。我们会在下一章讲解将这些React元素渲染到DOM中。下面,你可以来看看JSX的基础知识来起步。
在JSX中嵌入表达式
function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( <h1> Hello, {formatName(user)}! </h1> ); ReactDOM.render( element, document.getElementById('root') );
我们把JSX代码分割成多行,这样可读性好。即使不需要,但当这样做地时候,我们同样建议将它包裹在圆括号里避免意想不到的错误。
JSX也是一种表达式
JSX表达式在编译之后会变成规则的js对象。
这表示你可以将JSX放在if条件语句中或者for循环中,把它们赋值给变量,将他们作为函数的参数,也可以在函数中作为返回值:
function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>; }
在JSX中指定属性
有时你会使用引用(就是引号)来指定字符串字面量作为属性:
const element = <div tabIndex="0"></div>;
也许你也会使用花括号来嵌入一个js表达式到属性中:
const element = <img src={user.avatarUrl}></img>;
当你在属性里嵌入js表达式的时候不要使用引用(引号)。否则JSX会把属性值当做一个字符串字面量而不是js表达式。你要么使用引用(引号,为字符串值)要么就用花括号(为js表达式),但是不要同时使用。
在JSX中指定子元素
如果是一个空标签,你会以一个/>来结尾,就像xml:
const element = <img src={user.avatarUrl} />;
JSX标签也可以包含子元素:
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
警告:
JSX更接近于js而不是HTML,所以React DOM使用驼峰属性命名规则来取代原来的HTML属性名。
举个例子,class变成了className,tabindex变成了tabIndex。
JSX防止注入攻击
在JSX中嵌入用户输入是很安全的:
const title = response.potentiallyMaliciousInput; // This is safe: const element = <h1>{title}</h1>;
默认情况下,React DOM会在渲染之前避免任何嵌入JSX的值。因此这样能够保证没有人能够将不明确的东西注入你的程序。所有输入都会在渲染之前被转换成字符串。这样能够防止XSS攻击。
JSX表现为对象
Babel会把JSX转换成一个React.createElement()调用。
下面两个例子是相似的:
const element = ( <h1 className="greeting"> Hello, world! </h1> );
const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );
React.createElement()会执行好几次检查帮助你减少bug而且更重要的它会创建一个这样的对象:
// Note: this structure is simplified const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world' } };
这些对象叫做“React元素”。你可以把它看成是你在屏幕上看到的东西的描述。React会读取这些对象然后使用它们构建DOM并且保持更新。
我们在下一章节研究渲染React元素到DOM。
提示:
建议搜索“Babel”语法格式用于你的编辑器,这样可以高亮显示ES6和JSX的代码。