HTML标签 与 React组件 对比
预计阅读时间: 5 分钟
–React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。
要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名
var myDivElement = <div className="foo" />; React.render(myDivElement, document.body);
要渲染 React 组件，只需创建一个大写字母开头的本地变量。
var MyComponent = React.createClass({/*...*/}); var myElement = <MyComponent someProperty={true} />; React.render(myElement, document.body); 转换
JSX 把类 XML 的语法转成纯粹 JavaScript
var Nav; // 输入 (JSX): var app = <Nav color="blue" />; // 输出 (JS): var app = React.createElement(Nav, {color:"blue"}); //注意，要想使用 <Nav />，Nav 变量一定要在作用区间内。 JSX 也支持使用 XML 语法定义子结点
var Nav, Profile; // 输入 (JSX): var app = <Nav color="blue"><Profile>click</Profile></Nav>; // 输出 (JS): var app = React.createElement( Nav, {color:"blue"}, React.createElement(Profile, null, "click") ); JavaScript 表达式
属性表达式要使用 JavaScript 表达式作为属性值， 只需把这个表达式用一对大括号 ({}) 包起来，不要用引号 ("")。
// 输入 (JSX): var person = <Person name={window.isLoggedIn ? window.name : ''} />; // 输出 (JS): var person = React.createElement( Person, {name: window.isLoggedIn ? window.name : ''} ); 子节点表达式
// 输入 (JSX): var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>; // 输出 (JS): var content = React.createElement( Container, null, window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login) ); 注释你只需要在一个标签的子节点内(非最外层)小心地用 {} 包围要注释的部分。
var content = ( <Nav> {/* 一般注释, 用 {} 包围 */} <Person /* 多 行 注释 */ name={window.isLoggedIn ? window.name : ''} // 行尾注释 /> </Nav> ); 正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
