文書による機能部品createelement、反応する.CreateElementとJSX

先週、私はラムラ学校で学生に、バニラJSで再利用できる機能的な構成要素をつくる方法を学びました.今週、彼らは反応で機能的な構成要素をつくる方法を学びます.私はバニラJSで彼らが書いたコンポーネントを取っていて、反応で彼らを再現しているように、少し彼らの知識をブリッジするのを助けたかったです.CreateElementとJSXを使用します.
それで始めましょう.
まず、バニラJSコンポーネントがあります.目標は再利用可能なパネルコンポーネントを作成することでした.(このブログ記事に必要なコードや目的を削除しました)
学生は、機能的なコンポーネントと文書の使い方について学びました.DOMに要素を追加するCreateElement.
私は、両方とも反応して、これを「反応する方法」をする方法を示したかったです.CreateElementとJSX
反応を見てみましょう.CreateElement最初.

反応する。createelement

var Panel = function Panel(props) {
  var title = props.title,
    content = props.content;
  return React.createElement(
    "div",
    {
      className: "panel"
    },
    React.createElement(
      "div",
      {
        className: "panel-bar"
      },
      React.createElement("h3", null, title),
      React.createElement(
        "div",
        {
          className: "panel-buttons"
        },
        React.createElement(
          "button",
          {
            className: "panel-btn-open"
          },
          "Open"
        ),
        React.createElement(
          "button",
          {
            className: "panel-btn-close hide-btn"
          },
          "Close"
        )
      )
    ),
    React.createElement(
      "div",
      {
        className: "panel-content"
      },
      content
    )
  );
};

あなたは反応の上のコードから見ることができます.CreateElementウェイはドキュメントの使用に非常に似ています.createElement .

反応する。createelement

React.createElement(
          "button",
          {
            className: "panel-btn-open"
          },
          "Open"
        ),

ドキュメント。createelement

 const buttonOpen = document.createElement('button');
 buttonOpen.classList.add('panel-btn-open');
 buttonOpen.textContent = 'Open';

要素を作成します.この場合、私たちはそれをクラス、パネルBTNオープンを与えて、それにテキスト内容を与えます
これらの両方ともうまく動作しますが、とても冗長です.
これはJSXが入っているところです.

日本学術振興会

JSXはほぼHTMLのように見えますが、JavaScriptを使用してコンポーネントにさらに多くのパワーを追加する機能があります.
以下はJSXのコードの例です.createElement .

const Panel = props => {
  const { title, content } = props;

  return (
    <div className="panel">
      <div className="panel-bar">
        <h3>{title}</h3>
        <div className="panel-buttons">
          <button className="panel-btn-open">Open</button>
          <button className="panel-btn-close hide-btn">Close</button>
        </div>
      </div>
      <div className="panel-content">{content}</div>
    </div>
  );
};

私の意見では、これは多くの読みやすく理解し、前の2つの方法より一目でわかります.
私たちは、それぞれの要素を作成し、クラス名やテキストコンテンツを与えています.
これは、ドキュメントとコンポーネントを作成する簡単な比較でした.createelement、反応する.CreateElementとJSXでは、各方法の使用方法を説明します.このCodeDandboxを見て、ここで使用されているすべてのコードを見て、どのように小道具を使用しているかを見てみましょう.