☢️ HTMLコメント

6826 ワード
react javascript typescript html テキストリンク
あなたがReactを学び始めて、それが構文JSXであるのを見たならば、あなたは多分考えました.HTMLのようです
そしてある日、JSXで何かをコメントしたいと思います.
function Component() {
  return (
    <div>
      <!-- This is my comment -->
      The quick brown fox ...
    </div>
  )
}
そして、確かにあなたのバンドルは、あなたの構文が無効であることを文句を言い始めたし、インターネットを検索し、HTMLのコメントはJSXで有効ではないことを理解し、JavaScriptのコメントを使用する必要があることを学びます.
よくこのブログの記事では、いくつかの手順で実際のHTMLコメントをあなたのブラウザでレンダリングするためにどのようにトリックトリックを学習するための学習のためのあなたを表示します.

ステップ1
生成生成反応アプリCreate React App
npx create-react-app my-experiment --template typescript
cd my-experiment
npm run start

ステップ2
オープンアプリ.tsxと文字列として固有のIDを持つconstを追加する
const HTMLComment = 'unique-html-comment'

ステップ3
あなたのアプリでIntrinsic Elementとして、このHTMLCommentを宣言してください.TSXTypeScriptは必須ではありませんが、何か面白いことを学ぶ必要があります😊
import { PropsWithChildren } from 'react';

declare global {
  namespace JSX {
    interface IntrinsicElements {
      [HTMLComment]: PropsWithChildren<unknown>
    }
  }
}

ステップ4
これはあなたのアプリケーションのJSX要素としてHTMLComment作成したレンダリングします.TSX
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <HTMLComment>This is my comment</HTMLComment>
        {/* ... */}
      </header>
    </div>
  );
}
ブラウザで何がレンダリングされたかチェックしましょう.

まあ、それは期待され、反応は我々の要素は、DOM要素であり、通常通りにそれをレンダリングします.動きましょう.

ステップ5
  • オープンノーデナーモジュール/反応DOM/CJS/反応DOM.開発js
    • createElementは機能(線~ 8954)を見つけます} else if (typeof props.is === 'string') {(線~ 8986)を見つける


  • あなたは、最後の} else {を見ます?最後の枝の中に新しい要素が作成されます.我々は、ifをチェックするために、もう一つのHTMLComment支店を加える必要があります
    if (type === 'unique-html-comment') {
  domElement = ownerDocument.createComment('')
}
    最後に追加されたコードは次のようになります.

    ファイルを保存します.CRAプロセスを再起動するので、内部のnode_modulesから新しい変更を見ることができます
    ブラウザを開いて結果を確認します.

    そして、それはどのようにHTMLコメントをレンダリングに反応トリック!
    今、ハッカーのようなフェーリング?🤣

    Florian OlivoのUnsplashによる掩護写真
    • mysql主従レプリケーション遅延問題の詳細について
    研究室10