React 語法 JSX

語法

基礎介紹文章紀錄

[React筆記 03] React 組件、函式與生命週期MiniLab × Memo

JSX

看起來是 html 與 JS 混合使用，比較接近 JavaScript 而不是 HTML，ＪＳＸ允許你使用 JavaScript 所有的功能。

• Ref :https://zh-hant.reactjs.org/docs/introducing-jsx.html

專案產生的public/index.html，含有基本HTML範本id="root"的div區塊

<div id="root"></div>

React 中的 JSX 區域

接著看一下src/index.js裡的程式碼

基本範例: ReactDOM.render

由 React DOM 函式將元素渲染 ROOT 這個DOM 節點中
而將 html 當參數傳遞是使用一種Javascript語法: JSX

+// APP是組件
ReactDOM.render(<App />, document.getElementById('root'));

+//或是改成   "將 html 當參數傳遞" 
ReactDOM.render(<h1> Hello world!</h1>,document.getElementById('root'));

使用變數 const element = ...;

+//一般javascript
const name = 'Josh Perez'; 

+//混和的 html 與字串 特殊JSX語法
const element = <h1>Hello, {name}</h1>;  
const element = <ChildComponent firstName="Aaron" lastName="Chen" />;
function ChildComponent({ firstName, lastName }) {
  return <h1>Hello, {firstName} {lastName}</h1>;    // Hello, Aaron Chen
}

+ 把變數丟入render也可以
ReactDOM.render(element,document.getElementById('root'));

關於Babel

是JavaScript 前處理器，編譯器，主要能轉換JSX與ES6成各瀏覽器支持的ＪＳ

- const element = (<h1 className="text">Hello, World!</h1>);
+//Babel 將 JSX 編譯為呼叫 React.createElement() 的程式。
+剛剛混用的語法就是以下轉換
+const element = React.createElement('h1', {className: 'text'}, 'Hello, World!');

---

範例: 在 html中 用{JS} 表達式崁入變數

+//js 函式宣告或是變數宣告區
const styleRed = { color: 'red' };

+//html語法可以當作參數傳遞
const pic=()=>{ 
  return (
  <div><img src="https://picsum.photos/200/200?image=229" alt="" class="circle-profile"/></div>);
}
var arr = [
        <h1>REACT學習</h1>,
        <h2>如何使用JSX！</h2>,
];

ReactDOM.render( 
 <React.StrictMode>
   <h1 style = { styleRed } > Hello, world! </h1>
+   <div>{ pic()} </div> {/*註解這樣寫*/}
+   <div>{arr}</div>,{/*可以放入數組*/}
 </React.StrictMode>,
    document.getElementById('root')
);

- 可在 html 標籤中利用 {} 寫 javascript 表示式
- 其中style = {{ color: 'red' }} 這樣的表示也可以。

範例: 帶入onClick 與 Event

+// 可以用event 去拿到參數
+const getValue=(event)=>{
+  console.log(event.target.value). //event.target.value
}
ReactDOM.render(
 <React.StrictMode>
    <h1 className = "title" > Hello, world! </h1>
+   <button value onClick={getValue}>按下以取得數值 </button>
+   <button value={true} onClick={getValue}>按下以取得數值 </button>
 </React.StrictMode>,
    document.getElementById('root')
);

- onclick是要帶入函式 而不是結果！！！ 以下紅字為錯誤寫法
// 不帶參數
+ const handelSubtract = () => {
    setCount(count - 1);
    console.log(`current Count is ${count}`);
+ };

+<ActionBlock onClick={handelSubtract}
- <ActionBlock onClick={handelSubtract()} 注意不能這樣寫 會直接執行一次 陷入無限迴圈

// 如果該函式有參數，不能直接撰寫要加上() => 
+ onClick={() => handelAction('Subtract')}
- onClick={handelAction('Subtract')}

• 駱駝式命名

  • class 要用 className 然後可以在 style.css中更改樣式

  • onclick 也要改onClick{函數名稱} 駱駝式命名

  • 實測命名打錯 console 會出現報 Warning: Invalid DOM property class. Did you mean className?

• 輸入類的元件 button/input/textarea 互動事件觸發時，函式只會接收到一個event類別的參數，並不能傳遞其他參數

• 布林=true 的屬性值可以不寫

• onclick 是要帶入函式 而不是結果

onclick是要帶入函式 而不是結果！！！

[Day 08 - 計數器] 一個不夠，給我一次來十個 - JSX 中迴圈的使用 裡面有詳細圖解

• 如果你想要印出 false、true、null 或者 undefined 時，只能先轉為 string

• cannot-render-boolean-value-in-jsx

範例 JSX 引入Inline-style

export default function App() {
  return (
    <div className="App" style={{
      color: 'blue',fontSize:'19px'
    }}>
    </div>
  );
}

• 在style內的是ＪＳ物件也可以把他們只給一個const變數

• 內容與css不同的是必須是小寫駱駝且去除'-'

• 這種寫法的缺點是不行用hover等特殊效果，需利用其他模組化style寫法

條件渲染

• 這邊的寫法是根據ＪＳ邏輯運算子與ＪＳＸ寫法

範例： CSS 隱藏方式

控制 css style , 可以選擇以下兩種：

• display:none （空間會消失 導致畫面排版「跳一下）

• visibility:hidden（空間會存在）

//找到要加的地方 inline style
 <div
+  style={{
+    visibility: count >= 10 && 'hidden',
+  }}
  onClick={() => {
    setCount(count + 1);
  }}
/>

//或者寫在className 隱藏元素 --> .vh是先定義到 css裡.  {中是ＪＳ判斷}  
 <div
+  className={`chevron chevron-up ${count >= 10 && 'vh'}`}
  onClick={() => {
    setCount(count + 1);
  }}
/>

ＪＳ的邏輯運算子

在 JavaScript 中，&& 或 || 這種語法稱作「邏輯運算子（Expressions - Logical operator）」，而因為在 JSX 中的 {} 內只能放入表達式（expressions），而不能寫入像是 if...else... 這種陳述句（statement）

• || 就是前面為假時去拿後面的那個,為真拿前面

const a = 0 || 'iPhone'; 
// 因為 0 被轉型後為 false，所以 a 會是 'iPhone'
const b = 26900 || 24900;  
// 因為 26900 會轉型為 true，所以 b 會是 26900

• && 就是前面為真時去拿後面的那個,為假拿前面

const a = 0 && 'iPhone';   
// 因為 0 被轉型後為 false，所以 a 會是 0
const b = 26900 && 24900;  
// 因為 26900 轉型為 true，所以 b 會是 24900

範例：使用JSX外層判斷將 DOM整個隱藏方式

如果你需要比較嚴格的去控制使用者的行為，不想要使用者透過 CSS 就能簡單修改的話，那麼就把 DOM 整個移除；但如果這個功能被使用者手動打開也不會有太大影響的話，那就使用 CSS 樣式來控制畫面就好，如此會有比較好的效能和體驗(不會讓畫面排版有抖動的情況)。

//找到要控制的區塊
+ {count < 10 && (
  <div
    onClick={() => {
      setCount(count + 1);
    }}
  />
+ )}d

三元判斷

{條件？（組件）：（組件）}

• 記得要加上（） 否則會錯誤

 {props.item.image !== undefined && props.item.image !== '' ? (

        <img src={props.item.image} alt={props.item.name} width="100%" ></img>

      ) : (
        <>
          {props.item.imageNode}
        </>
      )
      
      //可以單獨用 {props.item.imageNode} 但不知道為什麼包進三元子要用加<></>
      
      

常用範例：當滑鼠滑到時出現某個效果

React onHover Event Handling (with Examples) - UpmostlyUpmostly

import React, { useState } from 'react';
import './App.css';

function App() {
  const [isShown, setIsShown] = useState(false);

  return (
    <div className="App">
      <button
        onMouseEnter={() => setIsShown(true)}
        onMouseLeave={() => setIsShown(false)}>
        Hover over me!
      </button>
      {isShown && (
        <div>
          I'll appear when you hover over the button.
        </div>
      )}
    </div>
  );
}

export default App;

迴圈重複渲染

當在 JavaScript 中要重複執行某一個內容或動作時，很直覺的會想到可以用 for 迴圈，for 迴圈 本身是個 statements 而非 expressions，執行的時候並不會有回傳值，因此不能直接放到 JSX 中的 {} 內去執行

- 錯誤寫法 >
-    {
-      for (let i = 0; i < 10; i ++) {
        <Counter />
-      }
-    }
  </div>
  
+ 利用array map
// STEP 1: 建立元素數目為 14，內容為 [0, 1, ..., 13]
const counters = Array.from({ length: 14 }, (_, index) => index);

{/* STEP 2: 使用 map 產生多個 <Counter /> */}
+    {counters.map((item) => (
      <Counter />
+    ))}

• Array.from() 詳細的用法可以參考 MDN 的說明

參考

• 【React.js入門 - 06】 JSX

• React篇: JSX語法撰寫指引

• [Day 07 - 計數器] 幫計數器設個最大最小值吧 - JSX 中條件渲染的使用