HTMLタグとReactコンポーネントの比較_html/css_WEB-ITnose

推定読了時間: 5 分

– React の JSX 規約では、ローカル コンポーネント クラスと HTML タグを区別するために大文字と小文字の頭文字が使用されます。

HTML タグをレンダリングするには、JSX で小文字で始まるタグ名を使用するだけです。

var myDivElement = <div className="foo" />;React.render(myDivElement, document.body);

React コンポーネントをレンダリングするには、大文字で始まるローカル変数を作成するだけです。

var MyComponent = React.createClass({/*...*/});var myElement = <MyComponent someProperty={true} />;React.render(myElement, document.body);

変換

JSX は、XML のような構文を純粋な JavaScript に変換します

var Nav;// 输入 (JSX):var app = <Nav color="blue" />;// 输出 (JS):var app = React.createElement(Nav, {color:"blue"});//注意，要想使用 <Nav />，Nav 变量一定要在作用区间内。

JSX は、XML 構文を使用した子ノードの定義もサポートします

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

JavaScript 式

属性式 JavaScript 式を属性値として使用するには、式を中括弧 ({}) で囲みます。引用符 ("") は使用しません。

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

子ノード式

// 输入 (JSX):var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;// 输出 (JS):var content = React.createElement(Container,null,window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login));

注釈 ラベルの子ノード (最外層ではありません) 内で、注釈を付ける部分を {} で注意深く囲むだけで済みます。

var content = (<Nav>{/* 一般注释, 用 {} 包围 */}<Person/* 多行注释 */name={window.isLoggedIn ? window.name : ''} // 行尾注释/></Nav>);