React入门使用JSX_html/css_WEB-ITnose

转自https://github测试数据/hulufei/react-tutorial

使用 JSX

利用 JSX 编写 DOM 结构，可以用原生的 HTML 标签，也可以直接像普通标签一样引用 React

组件。这两者约定通过大小写来区分，小写的 字符串 是 HTML 标签，大写开头的 变量 是 React 组件。

使用 HTML 标签：

import React from 'react';import { render } from 'react-dom';var myDivElement = 
;render(myDivElement, document.getElementById('mountNode')); 

HTML 里的 class在 JSX 里要写成 className，因为 class在 JS 里是保留关键字。同理某些属性比如 for要写成 htmlFor。

使用组件：

import React from 'react';import { render } from 'react-dom';import MyComponent from './MyComponet';var myElement =  ;render(myElement, document.body); 

使用 JavaScript 表达式

属性值使用表达式，只要用 {}替换 "":

// Input (JSX):var person =  ;// Output (JS):var person = React.createElement(  Person,  {name: window.isLoggedIn ? window.name : ''}); 

子组件也可以作为表达式使用：

// Input (JSX):var content =  {window.isLoggedIn ?   :  } ;// Output (JS):var content = React.createElement(  Container,  null,  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)); 

注释

在 JSX 里使用注释也很简单，就是沿用

JavaScript，唯一要注意的是在一个组件的子元素位置使用注释要用 {}包起来。

var content = (         {/* child comment, put {} around */}          ); 

HTML 转义

React 会将所有要显示到 DOM 的字符串转义，防止 XSS。所以如果 JSX

中含有转义后的实体字符比如 ©(©) 最后显示到 DOM 中不会正确显示，因为

React 自动把 ©中的特殊字符转义了。有几种解决办法：

直接使用 UTF-8 字符 © 使用对应字符的 Unicode编码， 查询编码 使用数组组装

{['cc ', © , ' 2015']}

查看更多关于React入门使用JSX_html/css_WEB-ITnose的详细内容...