React JSX_html/css_WEB-ITnose の使用を開始する

https://github.com/hulufei/react-tutorial より転載

JSX を使用して DOM 構造を記述します。ネイティブ HTML タグを使用することも、React を直接参照することもできます通常のタグ

コンポーネント。 2 つの規則は大文字と小文字で区別されます。小文字の

string

は HTML タグであり、大文字の

variable は React コンポーネントです。 HTML タグを使用します:

import React from 'react';import { render } from 'react-dom';var myDivElement = <div className="foo" />;render(myDivElement, document.getElementById('mountNode'));

class は JS の予約キーワードであるため、HTML のクラスは JSX の className として記述する必要があります。同様に、for などの一部の属性は htmlFor として記述する必要があります。

コンポーネントを使用する:

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

JavaScript 式を使用する

属性値に式を使用します。"" を {} に置き換えるだけです:

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

サブコンポーネントも式として使用できます:

// 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));

コメント

JSX では コメントを使用します。これも非常に簡単で、

JavaScript を使用するだけです。唯一注意すべき点は、コンポーネントのサブ要素の位置でコメントを使用する場合は、コメントを {} で囲む必要があることです。

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

HTML Escape

React は、XSS を防ぐために、DOM に表示されるすべての文字列をエスケープします。そのため、JSX

に ©(©) などのエスケープされたエンティティ文字が含まれている場合、

React が © 内の特殊文字を自動的にエスケープするため、DOM では正しく表示されません。いくつかの解決策があります:

UTF-8 文字を直接使用する ©

対応する文字の Unicode エンコーディングを使用し、エンコーディングをクエリする
配列アセンブリを使用する dc6dce4a544fdca2df29d5ac0ea9906b{['cc ', 45a2772a6b6107b401db3c9b82c049c2© ;< ;/span>, ' 2015']}16b28748ea4df4d9c2150843fecfba68
生の HTML に直接挿入

<div dangerouslySetInnerHTML={{__html: 'cc &copy; 2015'}} />

• カスタム HTML 属性

JSX で使用される属性が HTML の仕様に存在しない場合

, この属性は無視されます。カスタム属性を使用したい場合は、data- プレフィックスを使用できます。

アクセシビリティ属性の接頭辞 aria- もサポートされています。

サポートされているタグと属性

使用したいタグや属性がこれらのサポート リストにない場合、それらは React によって無視される可能性があります

どうしても使用しなければならない場合は、問題を報告するか、前述の危険な SetInnerHTML を使用してください。その上。