React 入门使用 JSX_html/css_WEB-ITnose
程序员文章站
2022-04-15 11:58:33
...
转自https://github.com/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 = ( );
HTML 转义
React 会将所有要显示到 DOM 的字符串转义,防止 XSS。所以如果 JSX
中含有转义后的实体字符比如 ©(©) 最后显示到 DOM 中不会正确显示,因为
React 自动把 ©中的特殊字符转义了。有几种解决办法:
- 直接使用 UTF-8 字符 ©
- 使用对应字符的 Unicode编码, 查询编码
- 使用数组组装 {['cc ', ©, ' 2015']}
- 直接插入原始的 HTML
自定义 HTML 属性
如果在 JSX 中使用的属性不存在于 HTML
的规范中,这个属性会被忽略。如果要使用自定义属性,可以用 data-前缀。
可访问性属性的前缀 aria-也是支持的。
支持的标签和属性
如果你要使用的某些标签或属性不在这些支持列表里面就可能被 React
忽略,必须要使用的话可以提 issue,或者用前面提到的 dangerouslySetInnerHTML。
推荐阅读
-
react.js使用webpack搭配环境的入门教程
-
React Native基础入门之初步使用Flexbox布局
-
React 入门教程系列(三)——JSX的理解与使用
-
stylus入门使用方法_html/css_WEB-ITnose
-
开始使用React和JSX_html/css_WEB-ITnose
-
React入门学习_html/css_WEB-ITnose
-
HTML与CSS入门--第五章 使用文本块和列表_html/css_WEB-ITnose
-
HTML与CSS入门--第六章 使用字体_html/css_WEB-ITnose
-
HTML与CSS入门--第五章 使用文本块和列表_html/css_WEB-ITnose
-
POSTCSS快速入门使用_html/css_WEB-ITnose