JSX
JSXとは何ですか。
JSXはJavaScriptを拡張する文法です.
UIの外観を説明するためにReactとともに使用されます.
const element = <h1>Hello, world!</h1>;
JSX vs HTML
1. Custom Styling to an element
<button style="background-color: blue color: white;">
Submit
</button>
次のHTMLコードは、次のボタンを生成します.ただし、この構文がJSXで使用されている場合、次のエラーが発生します.
これは、JSXが属性の値を「」ではなく{}として使用し、camel caseではなくcamel caseを使用するためです.
作成する場合は、次のようになります.
<button style={{ backgroundColor: 'blue', color: 'white' }}>
Submit
</button>
正常に動作していることを確認できます.2. Adding a class to an element uses different syntax
<label class="label" For="name">Enter name:</label>
次のコードは、出力が正常に発生する可能性があることを示しますが、consoleを表示すると警告が表示されます.JavaScriptで使用されているclassとFor rufficが混同される可能性があるため、Reactは警告を返します.
これは、次の方法で解決できます.
<label className="label" htmlFor="name">Enter name:</label>
3. JSX can reference JS variables
function getTime() {
return (new Date()).toLocaleTimeString()
}
// Creates a functional component
const App = () => {
return (
<div>
<div>Current Time:</div>
<h3>12:05 PM</h3>
</div>
);
}
以下のコードがある場合、h 3ラベルはハードコーディングされます.これは、前述の
getTime()
関数をJSXで使用することができる. const App = () => {
return (
<div>
<div>Current Time:</div>
<h3>{getTime()}</h3>
</div>
);
}
Reference
この問題について(JSX), 我々は、より多くの情報をここで見つけました https://velog.io/@dmdwn3979/JSXテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol