HTML标签与 React组件对比_html/css_WEB-ITnose-html教程-PHP中文网

HTML标签与 React组件对比_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 08:49:01

原创

1589人浏览过

预计阅读时间: 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>);

登录后复制

HTML标签 与 React组件 对比_html/css_WEB-ITnose

HTML标签与 React组件对比_html/css_WEB-ITnose