Rumah > hujung hadapan web > html tutorial > React 入门使用 JSX_html/css_WEB-ITnose

React 入门使用 JSX_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:15:50
asal
1265 orang telah melayarinya

转自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 = <div className="foo" />;render(myDivElement, document.getElementById('mountNode'));
Salin selepas log masuk

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

使用组件:

import React from 'react';import { render } from 'react-dom';import MyComponent from './MyComponet';var myElement = <MyComponent someProperty={true} />;render(myElement, document.body);
Salin selepas log masuk

使用 JavaScript 表达式

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

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

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

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

注释

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

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

var content = (  <Nav>      {/* child comment, put {} around */}      <Person        /* multi           line           comment */        name={window.isLoggedIn ? window.name : ''} // end of line comment      />  </Nav>);
Salin selepas log masuk

HTML 转义

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

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

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

  • 直接使用 UTF-8 字符 ©
  • 使用对应字符的 Unicode编码, 查询编码
  • 使用数组组装
    {['cc ', ©, ' 2015']}
  • 直接插入原始的 HTML
<div dangerouslySetInnerHTML={{__html: 'cc &copy; 2015'}} />
Salin selepas log masuk

自定义 HTML 属性

如果在 JSX 中使用的属性不存在于 HTML

的规范中,这个属性会被忽略。如果要使用自定义属性,可以用 data-前缀。

可访问性属性的前缀 aria-也是支持的。

支持的标签和属性

如果你要使用的某些标签或属性不在这些支持列表里面就可能被 React

忽略,必须要使用的话可以提 issue,或者用前面提到的 dangerouslySetInnerHTML。

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan