React开发教程5:JSX
本教程由好办法汇总原创
React的模板中采用的是JSX,而不是标准的JavaScript。
虽然不是必须要使用JSX。但采用JSX有很多好处。
- JSX性能较快,当它编译成JavaScript时它进行了优化处理。
- JSX是更安全的,它在编译时就会及时报错。
- 对于熟悉HTML的开发者,用JSX来写模板template是较为简单和快捷的。
使用JSX
大多数情况,JSX语法和标准的HTML相似。
这里我们看下App.jsx中是如何实现div的。
App.jsx
import React from 'react'; class App extends React.Component { render() { return ( <div> Hello World!!! </div> ); } } export default App;
尽管和HTML基本相似,这里有几个值得注意的地方。
层级元素 Nested Elements
如果你想返回return多个元素,你需要把它们放在一个container元素中。
这里注意我们使用 div 作为 h1, h2 和 p 的容器wrapper。
App.jsx
import React from 'react'; class App extends React.Component { render() { return ( <div> <h1>Header</h1> <h2>Content</h2> <p>This is the content!!!</p> </div> ); } } export default App;
属性
除了标准的HTML的属性,你可以使用自定义的属性。当你需要使用自定义的属性,请加上 data- 前缀。下面例子中,我们添加了data-myattribute 作为 p 元素的一个属性。
import React from 'react'; class App extends React.Component { render() { return ( <div> <h1>Header</h1> <h2>Content</h2> <p data-myattribute = "somevalue">This is the content!!!</p> </div> ); } } export default App;
JavaScript 表达式
JavaScript 表达式可以在JSX中使用。. 你只需要加上花括号 {} 使用。 下面例子会返回 2 。
import React from 'react'; class App extends React.Component { render() { return ( <div> <h1>{1+1}</h1> </div> ); } } export default App;你不能再JSX中使用 if else 语句。但你可以使用条件表达式 conditional (ternary) 替代if else语句。 下面例子中变量 i 等于 1 ,浏览器会返回true。 如果我们用其他值,就会返回 false.
import React from 'react'; class App extends React.Component { render() { var i = 1; return ( <div> <h1>{i == 1 ? 'True!' : 'False'}</h1> </div> ); } } export default App;

式样
React推荐使用 inline 式样。当你定义 inline 式样,你需要依照camelCase 语法命名规则。在添加某个元素具体数字后,React会自动添加 px 。如下面例子中,就可以看到是如何添加 myStyle inline式样到 h1 元素中。
import React from 'react'; class App extends React.Component { render() { var myStyle = { fontSize: 100, color: '#FF0000' } return ( <div> <h1 style = {myStyle}>Header</h1> </div> ); } } export default App;![]()
注释
在一个标签的子元素区域加React注释,需要放在花括号{} 中。一般来讲最好尽量使用 {} 花括号注释,这样可以保持代码的一致性。
import React from 'react'; class App extends React.Component { render() { return ( <div> <h1>Header</h1> {//End of the line Comment...} {/*Multi line comment...*/} </div> ); } } export default App;
React命名规则
HTML标签是使用小写 lowercase 的标签名。然而, React的组件命名是以大写字母Uppercase 作为首字母开始的。
注意
你需要使用 className 和 htmlFor 作为 XML的class and for属性名。
这里是 React 官方的解释。
因为 JSX 是 JavaScript, class 和 for 不适合作为 XML 的属性名。因此, React DOM 组件使用 className 和 htmlFor 对应 DOM 属性。