JSXとは何ですか? jsxの使い方入門（コード付き）

jsxとは何ですか? jsxの用途は何ですか?この記事では、JSX とは何かについて説明します。 jsxの使い方（コード付き）の紹介、具体的な内容を見ていきましょう。

React では、ページのコンテンツは JSX を介して書かれていますが、JSX とは正確には何でしょうか? JSX は実際には、HTML 構造の情報を記述する js オブジェクトを作成する JavaScript オブジェクトです。ここで、JSX は js の拡張言語であり、HTML に似ていますが HTML ではないことを思い出してください。JSX は計算や判断、いくつかの js 言語の追加なども行うことができるからです。

jsxを使用したJSXでの操作

   render() {
      return(
        <div>
           <h2>算数题</h2>
           <ul>
             <li>5+6={5+6}</li>
             <li>6+6={6+6}</li>
             <li>10*10={10*10}</li>
           </ul>
        </div>
      )
    }

JSXでは、HTMLとjsを区別するために{}を使用します。つまり、すべてのjs言語を{}で囲む必要があります

変数の使用in JSX

 render() {
      const flag = true;
      return(
        <div>
            {flag ? (<div>flag为真</div>) : (<div>flag为假</div>)}
        </div>
      )
    }

jsx を使用した JSX のスタイル

JSX では、要素にスタイルを追加する際にも style 属性が使用されますが、以下に示すように、style にはスタイル オブジェクトが含まれています。 JSX では、スタイル属性名はキャメルケースで命名する必要があることを知ってください

JSX での jsx HTML タグの使用

JSX では、競合を防ぐためにいくつかのタグ名が使用されます いくつかの変換を行う必要があります:

class は className
lable 要素で置き換える必要があります。次のように、for 属性は htmlFor で置き換える必要があります。

2.  render() {
         var newStyle = {
           background: 'blue',
           fontSize:'15px'
         }
         return(
           <div>
               <div style={{color: &#39;red&#39;}}>颜色</div>
               <div style={newStyle}>样式</div>
           </div>
         )
       }

ここで、JSX のすべてのタグは Close タグである必要があることにも注意してください

関連する推奨事項:

Vue が JSX 構文をサポートする仕組みを詳しく解説

JavaScript の React フレームワークで JSX 構文を学ぶ入門チュートリアル_基礎知識

React の詳しい紹介

以上がJSXとは何ですか? jsxの使い方入門（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。