React自定義組件應用

React自定義組件應用

今天在學習React自定義組件的時候就聯想到了以前在學小程序的時候寫的自定義組件，不過它們子向父傳遞數據和父向子傳遞數據的方式是有所不一樣的。

組件化編碼流程

這裏經過一個案例來演示。

1. 拆分組件: 拆分界面,抽取組件
2. 實現靜態組件: 使用組件實現靜態頁面效果
3. 實現動態組件：動態顯示初始化數據(數據類型、數據名稱)
4. 交互(綁定事件監聽等)

好比實現下面這個todos，由於這裏主要是要講組件，因此對這些樣式什麼的就不作詳細的解釋了。

將這一整個當作App組件，裏面分紅4個小組件，分別爲Header、List、Item、Footer。下面經過這個案例來講一下子向父傳遞數據和父向子傳遞數據的方法。

1. 父向子傳遞數據

動態渲染List

首先，Item 是 List 的子組件，在動態渲染的過程當中，要用一個 List 向 Item 傳遞列表的值讓 Item 渲染出來，此時咱們沒辦法直接讓列表的數據直接從List傳遞到Item，所以應該把此時的狀態state中的數據todos定義在App組件中，經過App組件傳給App組件的子組件List，再由List將值傳遞給Item從而將todos渲染出來。子組件再從this.props取出從父組件傳過來的值。

簡單講，這裏的涉及到的知識點就是父向子傳遞數據。

// App.jsx
export default class App extends Component {
    state = {
        todos: [
            { id: '1', name: '吃飯', done: true },
            { id: '2', name: '睡覺', done: false },
            { id: '3', name: '打代碼', done: false },
        ]
    }
    render() {
        const { todos } = this.state;
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header></Header>
                    <List todos={todos}></List>
                    <Footer></Footer>
                </div>
            </div>
        )
    }
}
複製代碼

}
複製代碼

以前學習小程序的時候，也有這個知識點(微信小程序——自定義組件)，不過React中的子向父傳遞數據中，咱們是要對props進行類型限制，在小程序中，還須要子組件在json文件中的properties中定義從父組件傳遞的數據。

注意點：

• 表示是否完成的checkbox的checked屬性值應爲defalutChecked，不然checked值沒法經過點擊改變
• 在渲染todos要給每個Item添加一個key值(key={todos.id})

2. 子向父傳遞數據

input添加todos

Header要將用戶輸入的值傳遞給List須要通過這個數據傳遞的過程：Header -> App -> List；

也就是說，這個的傳遞數據方式與上面的動態渲染相比，多了一個子向父傳遞數據。這個的實現方式是經過props從父組件App給子組件List傳遞一個函數(addTodos)。也就是說，在React中，子向父傳遞數據是經過函數來創建關係的。

addTodos = (todoObj) => {
    const { todos } = this.state;
    const newTodos = [todoObj, ...todos];
    this.setState({ todos: newTodos });
}
複製代碼

接着，在子組件(Header)中調用這個函數，當鍵盤按回車鍵的時候調用這個函數，而後把用戶輸入的東西給父組件中定義的函數。

handleKeyUp = (e) => {
    const { keyCode, target } = e;
    if (keyCode !== 13) return;
    if (target.value.trim() === '') return;
    const todoObj = { id: nanoid(), name: target.value, done: false }
    this.props.addTodos(todoObj)
    target.value = '';
}
複製代碼

有一個庫(uuid)可以獲取惟一標識，給id賦值，讓每個item都有一個獨一無二的id值做爲key，進行遍歷。在終端輸入npm install uuid或者npm add nanoid均可如下載這個庫，前者的文件比較大，建議下載第二個。在要調用的時候記得在引入import {nanoid} from 'nanoid'。

對props進行限制

對props傳遞的屬性類型進行必要性的限制。設置了類型以後，若是在傳的值不是這個類型的話，就會報錯

引入prop-types庫：在終端輸入npm add prop-types。 引入import PropTypes from 'prop-types'

static propTypes {
    addTodos: PropTypes.func.isRequired
}
複製代碼

總結

1. 拆分組件、實現靜態組件。注意：className、style的寫法

2. 動態初始化列表，若是是在某個組件使用就將state放在自身，若是是在多個組件使用就放在父組件中(狀態提高)

3. 【父組件】給【子組件】傳遞數據：經過props傳遞

   【子組件】給【父組件】傳遞數據：經過props傳遞，要求父提早給子一個函數

4. 注意defaultChecked和checked的區別。相似的還有：defaultValue和value

5. 狀態改變記得setState