React - 深入 JSX

關於JSX的各種編譯寫法可學習此篇，深度閱讀官方文件

守則

在 JSX 類型中使用點記法
使用者定義的 Component 必須由大寫字母開頭

import React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}
// 在 JSX 類型中使用點記法將Children點出來
function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

JSX 中的 Props

你可以用 {} 包住任何JavaScript 表達式作為一個 prop 傳遞。例如，在以下 JSX 中：

<MyComponent foo={1 + 2 + 3 + 4} />

對 MyComponent 來說，因為 1 + 2 + 3 + 4 會被解讀，所以 props.foo 的值會是 10。

Props 字串 String

<MyComponent message="hello world" />
// 相等
<MyComponent message={'hello world'} />

<MyComponent message="&lt;3" />
// 相等
<MyComponent message={'<3'} />

Props 布林 Boolean

<MyTextBox autocomplete />
// 相等 預設為True，但是不建議上方縮寫方式，容易與 ES6 object shorthand 混淆
// {foo} 是 {foo: foo} 的簡寫而不是 {foo: true}，所以並不建議這樣使用。
// 這種行為存在只是為了相配 HTML 的行為。
<MyTextBox autocomplete={true} />

展開屬性 (…Props)

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}
// 相等
function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

JSX 中的 Children

在 JSX 表達式有包含開始與結束標籤的情形下，夾在兩者之間的內容會被傳遞為特別的 prop：props.children。
最常用到的勢必是迴圈<li>了

function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      // 記得一定要有key喔！
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

Children 中 Booleans, Null, 與 Undefined 會被忽略

<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>

// 以上皆相同

當然除非是當作條件式去執行 Function

<div>
  {showHeader && <Header />} // 條件成立就可以渲染出<Header />
  <Content />
</div>