iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0
自我挑戰組

React基礎系列 第 7

第七天,React 關於JSX

  • 分享至 

  • xImage
  •  

JSX

1.JSX語法是React.createElement的簡寫語法,要使用它需要匯入(import)react函式庫,並且要透過babel工具編譯才可以。例:

//匯入函式庫

import React from "react";

//JSX變數宣告:

const CDom=<h1>myTitle</h1>
ReactDOM.render(CDom,document.getElementById('example'));

等同

const CDom=React.createElement('h1',{id:'myTitle'},'example')

所以兩種寫法都可以,但還是以JSX的方法較為直觀。

2.如果要將JavaScript或變數寫入HTML裡,必需加上大括號{}。

例:加入一個變數。

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

例:加入一段JavaScript

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

3.如果要將 CSS 寫在 HTML 裡,JSX 裡的 style 屬性需要包著一個 {}。style 屬性要以 JS 物件的格式設定 (JSON),採用駝峰式命名法而不是-,數值的單位是 px,其他單位要用單引號包住 (例:'50%')。外面要再加上一層大括號。

例:通常是用font-size,但這裡用fontSize

<a style={{ fontSize: '16px', color: '#FF0' }}>87</a>

4.註解:同 JS,註解可以用 /* */ 或 //,在 tag 中使用的話則須用大括號 {} 包住


上一篇
第六天, React 元件
下一篇
第八天,React圖文元件,重覆使用
系列文
React基礎12
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言