JSX

5436 ワード

JSX テキストリンク

JSX構文

HTMLの代わりに

を使用

クラスの代わりにclassNameで

を記述

<div className='abc'><div>

データのバインドが容易

オリジナルデータのバインド時は

//html파일
<div class='abc'></div>
//js파일
let abc =document.queryselector('.abc');
let n = 3;
abc.innerText = n;

jsxにデータをバインド

{}に変数名、関数名、画像インポートなどの大部分を挿入してデータをバインドできます

// 바로 바인딩이 가능 
import img from './img.svg';
let n =3;

function example(){
	console.log('h');
}
<img src ={img}/> // 기존 src ='./img.svg';
<div>{n}</div> // 3 
<div>{example}</div> // 'h'

cssは対象資料型で、使用可能

font-sizeの場合、真ん中に(-)がある場合は演算子で識別し、省略後は大文字で

と連写する.

let st = {color:'red',fontSize ='35rem'}; // 변수에 할당하여 사용할 수도 있다 
<div style = {{color:'red',fontSize ='35rem'}}> </div>

Reference

この問題について(JSX), 我々は、より多くの情報をここで見つけました https://velog.io/@bufo_g_p/JSX-xkec38q1

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

ICTテストの三極管の誤りを理解する必要があります

鄭州軽工業大学oj問題解(c言語)1078-1080多実例試験、入門問題