[Day6] [笔记] React Component (下）

前言

昨天我们知道 Component 是什麽，与其优点。那我们今天就接续介绍在 Component 中使用表达式、以及如何客制化撰写 Component 。

何谓 Declarative 宣告

开始前，我们必须知道在开发 React 元件时，我们主要是用 Declarative 开发思维方式设计程序。
简单来说 Declarative 宣告就是用一种抽象方式，程序重点着重在 WHAT TO DO。而非 How

Declarative 范例

const array = [1,2,3]
let result = array.filter(function(item){
   // 筛选数字大於 2 的内容
   return item > 2
})
console.log(result); //[3]

我们从范例中可以清楚程序在做什麽事，那接着我们来看与其对应的 Imperative 又是如何撰写？

Imperative范例

const array = [1,2,3];
let result = [];
for(let i =0; i < 3; i ++){
  if(array[i] > 2){
     result.push(array[i])
  }
}
console.log(result); //[3]

从上面程序码我们可以得知， Imperative 比较着重在程序运算这块，也就是所谓的 How

这篇写得很清楚可以直接参考这篇文章 Buzz Word 1 : Declarative vs. Imperative

客制化元件

讲完 Declarative 宣告，我们就直接进入主题吧！

Step1.

元件中，我们使用 JSX 语法糖撰写完成後，我们将函氏当成元件 Export 汇出。

必须注意元件开头必须大写如: AddComponent
载入 CSS 时，我们在 JSX 上必须用 className 而非 class

import { Fragment } from "react"; // Fragement 可以让我们直接产生一个空节点
import "../index.css";

const AddComponent = () => {
    return (
        <Fragment>
            <span>记事：</span>
            <input type="text" className="app" />
            <span>日期：</span>
            <input type="date" className="app" />
            <span>时间：</span>
            <input type="time" className="app" />
            <button className="add">新增</button>
        </Fragment>
    )
}
export default AddComponent;

Step2.

引入其他元件使用

import React from 'react';
import './index.css';
import AddComponent from '../Home/component/Add';
import { Fragment } from 'react';

const boolean = true;
const Home = () => {
  return (
    <Fragment>
      <AddComponent />
      <AddComponent />
      {boolean === true && <AddComponent />} //如果变数 Boolean 为真，就会渲染後方 Component
    </Fragment>
  )
}

export default Home;

Step3.

最後在跟节点， Root 上挂载上去

元件只能有一个 root element

import React from 'react';
import ReactDOM from 'react-dom';
import Home from './pages/Home';
import { configureStore } from '@reduxjs/toolkit';


ReactDOM.render(
  <Home />,
  document.getElementById('root')
);