React JSX_html/css_WEB-ITnose の練習に参加してください

JSX

React がドキュメントを記述するために DOM オブジェクト ツリーを使用することはわかっていますが、それが通常のオブジェクトの場合はどうなるのでしょうか。

var element = {  tagName: 'div',  props: {    id: 'div',    className: 'container'  },  children: [    {      tagName: 'div',      props: {        id: 'div1',        className: 'header'      },      children: [...{element}]    },    {      tagName: 'div',      props: {        id: 'div2',        className: 'content'      },      children: [...{element}]    },    {      tagName: 'div',      props: {        id: 'div3',        className: 'footer'      },      children: [...{element}]    }  ]}

対応する HTML:

<div class="container">  <div class="header"></div>  <div class="content"></div>  <div class="footer"></div></div>

JSX が与える方法はまったく逆で、このような HTML のような構造を記述することで、Transformer ツールを介してオブジェクトに変換されます。そして、JSX に頼らずに上記の構造を実装する方法を見てみましょう。

React.createElement(  'div',  { className: 'container'},  React.createElement(    'div',    { className: 'header'}  ),  React.createElement(    'div',    { className: 'content'}  ),  React.createElement(    'div',    { className: 'footer'}  ));

JSX の使用を開始します

将来のプログラミングの練習では、誰もが JSX を使用して React コンポーネントを作成できることを願っています

JSX を使用すると、次のことができます場合によっては、属性内の JavaScript の予約語に注意する必要があります。たとえば、class 属性は className として記述し、for は htmlFor として記述する必要があります。 JSX では大文字と小文字が区別され、HTML タグの場合は小文字、React コンポーネントの場合は大文字が区別されます。

JSX を使用して単純なコンポーネントを作成します。

import React from 'react';import { render } from 'react-dom';function Hello (props){  const { className, children } = props;  return (    <div className={ className }> { children } </div> );}render((  <Hello className="div"> Hello World </Hello>),document.getElementById('app'))

式

JSX では、{} は JavaScript 式を表すために使用され、ここで検索を実行できます。 値ロジックまたは代入、代入は上記の Hello の例で見ることができますが、必要なのは { Children } だけです。

さまざまなタイプに応じてさまざまなサブコンポーネントを表示するために実装したダイアログを見てみましょう。

良い書き方は、戻る前に論理的な判断を書くことです (良い):

import Alert from './Alert';import Confirm from './Confirm';class Dialog extends React.Component {  render (){    const { type } = this.props;    const Component = type === 'alert' ? Alert : Confirm;    return (      <section> <Component {...this.props} /> </section> );  }}

もちろん、式を直接 return に書くこともできます (この書き方は非常に便利です) bad) ：

import Alert from './Alert';import Confirm from './Confirm';class Dialog extends React.Component {  render (){    const { type } = this.props;    return (      <section> { type === 'alert' ? <Alert {...this.props} /> : <Confirm {...this.props} /> } </section> );  }}

コメント

JSX のコメントは、//、/**/ などの JavaScript と同じです。唯一の要件は、コメントを次で囲む必要があることです。 {}。

{/*<Component {...this.props }/>*/}

spread 属性

Dialog の例では、多数の... シンボルが見られます。これは、React コンポーネントの演算子です。 ... this.props} を使用すると、props のプロパティを React コンポーネントのプロパティに設定できます。

HTML エスケープとカスタム属性

XSS 攻撃を防ぐために、React コンポーネントは、必要に応じて DOM に表示する必要がある文字列をエスケープします。次のいくつかの解決方法:

• UTF-8 文字セットを使用する
• 対応する文字の Unicode エンコードを使用する
• 配列アセンブリを使用する
• オリジナルの HTML を使用する

<div>{['First ', <span key="middot">&middot;</span>, ' Second']}</div>

HTML 仕様に存在しない属性を JSX で使用する場合、この属性は無視されます。カスタマイズするには data-method を使用する必要があります。属性。

サポートされているタグ、属性、アクセシビリティ属性プレフィックスのリストについて:

• React でサポートされているタグ、属性
• アクセシビリティ属性プレフィックス リスト