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

WBOY
Release: 2016-06-21 08:49:01
Original
1213 people have browsed it

预计阅读时间: 5 分钟

–React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。

要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名

var myDivElement = 
;React.render(myDivElement, document.body);
Copy after login

要渲染 React 组件,只需创建一个大写字母开头的本地变量。

var MyComponent = React.createClass({/*...*/});var myElement = ;React.render(myElement, document.body);
Copy after login

转换

JSX 把类 XML 的语法转成纯粹 JavaScript

var Nav;// 输入 (JSX):var app = 
Copy after login

JSX 也支持使用 XML 语法定义子结点

var Nav, Profile;// 输入 (JSX):var app = ;// 输出 (JS):var app = React.createElement(Nav,{color:"blue"},React.createElement(Profile, null, "click"));
Copy after login

JavaScript 表达式

属性表达式要使用 JavaScript 表达式作为属性值, 只需把这个表达式用一对大括号 ({}) 包起来,不要用引号 ("")。

// 输入 (JSX):var person = ;// 输出 (JS):var person = React.createElement(Person,{name: window.isLoggedIn ? window.name : ''});
Copy after login

子节点表达式

// 输入 (JSX):var content = {window.isLoggedIn ? 
Copy after login

注释你只需要在一个标签的子节点内(非最外层)小心地用 {} 包围要注释的部分。

var content = ();
Copy after login
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!