3 JSX语法
const element = <h1>Hello, world!</h1>;
这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。它被称为 JSX, 一种 JavaScript 的语法扩展。元素是构成 React 应用的最小单位,JSX 就是用来声明 React 当中的元素。
注意: 由于 JSX 就是 JavaScript,一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代,React DOM 使用 className 和 htmlFor 来做对应的属性。
使用 JSX:
JSX 看起来类似 HTML :
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
可以在以上代码中嵌套多个 HTML 标签,需要使用一个 div 元素包裹它,
实例中的 p 元素添加了自定义属性 data-myattribute,添加自定义属性需要使用 data- 前缀。
ReactDOM.render( <div> <h1>菜鸟教程</h1> <h2>欢迎学习 React</h2> <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p> </div> , document.getElementById('example') );
JavaScript 表达式
ReactDOM.render( <div> <h1>{1+1}</h1> </div> , document.getElementById('example') );
注释:
注释需要写在花括号中:
ReactDOM.render( <div> <h1>菜鸟教程</h1> {/*注释...*/} </div>, document.getElementById('example') );
数组:
JSX 允许在模板中插入数组,数组会自动展开所有成员:
var arr = [ <h1>菜鸟教程</h1>, <h2>学的不仅是技术,更是梦想!</h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example') );