2020/11/18、 周三、今天又是奮斗的一天。

@Author：Runsen

這東西已經有很多大佬們寫過了，就不多班門弄斧了。主要使用這個例子入門 React ，包括 state、props、組件間通信這些基礎內容。Todo List 應用通常都被列為能入手開發項目的 Hello World 典范。

文章目錄

• index.js
• TodoList.js
• 拆分組件
• • TodoList.js
  • TodoItem.js
• React developer tools 安裝及使用

index.js

TodoList.js

具體代碼如下。

import React, { Component , Fragment} from 'react' class TodoList extends Component{constructor(props){super(props);// state 是組件在渲染自身時用到的數據。我們可以通過 this.state 獲得自己在 state 里定義的數據。this.state = {inpuValue : '',list: []}}render(){return (<Fragment ><div>{/* label中的htmlFor和input中的id一致，實現點擊label標簽，光標聚焦到input輸入框中 */}<label htmlFor="insertArea">輸入內容</label><input id="insertArea"value={this.state.inpuValue}onChange={this.handleInputChange.bind(this)}/><button onClick={this.handleBtnClick.bind(this)}>提交</button></div><ul>{this.state.list.map((item,index) => {// 遍歷itemreturn <li key={index} onClick={this.handleItemDelete.bind(this,index)}dangerouslySetInnerHTML = {{__html: item}}></li>})}</ul></Fragment>)}handleInputChange(e) {// 可以使用 this.setState() 方法更新 state，當this.setState()被調用時，React 會調用組件的 render() 方法重新渲染組件。需要提到的是 this.setState() 是異步的。this.setState({inpuValue: e.target.value})}handleBtnClick() {this.setState({list: [...this.state.list,this.state.inpuValue],inpuValue : ''})}handleItemDelete(index) {// state 不允許我們做任何改變 不能改變數據，需要復制一份出來// ...this.state.list ES6中新加入的數組展開運算符，將數組展開為列表// var a = [1,2,3]// console.log(...a) //1 2 3// console.log([...a]) //[1,2,3]const list = [...this.state.list]list.splice(index,1)this.setState({list: list})// 不推薦使用 this.state.list.split(index,1)} }export default TodoList

拆分組件

下面將TodoList拆分成兩個組件。

React數據流動是單向的，父組件向子組件通信也是最常見的。父組件通過props 向子組件傳遞需要的信息。

TodoList.js

import React, { Component, Fragment } from 'react'; import TodoItem from './TodoItem'; import './style.css';class TodoList extends Component {// React數據流動是單向的，父組件向子組件通信也是最常見的。constructor(props) {super(props);this.state = {inputValue: '',list: []}this.handleInputChange = this.handleInputChange.bind(this);this.handleBtnClick = this.handleBtnClick.bind(this);this.handleItemDelete = this.handleItemDelete.bind(this);}render() {return (<Fragment><div><label htmlFor="insertArea">輸入內容</label><input id="insertArea"className='input'value={this.state.inputValue}onChange={this.handleInputChange}/><button onClick={this.handleBtnClick}>提交</button></div><ul>{this.getTodoItem()}</ul></Fragment>)}getTodoItem() {// ES6遍歷數組return this.state.list.map((item, index) => {return (<TodoItem key={index}content={item} index={index}deleteItem={this.handleItemDelete}/>)})}handleInputChange(e) {const value = e.target.value;this.setState(() => ({inputValue: value}));}handleBtnClick() {this.setState((prevState) => ({list: [...prevState.list, prevState.inputValue],inputValue: ''}));}handleItemDelete(index) {this.setState((prevState) => {const list = [...prevState.list];list.splice(index, 1);return {list}});} }export default TodoList;

TodoItem.js

import React, { Component } from 'react';class TodoItem extends Component {constructor(props) {super(props);this.handleClick = this.handleClick.bind(this);}render() {// 父組件通過 props 向子組件傳遞需要的信息。直接使用this.props取出即可const { content } = this.props;return (<div onClick={this.handleClick}>{content}</div>)}handleClick() {// deleteItem是方法，當點擊刪除事件發生，父傳子const { deleteItem, index } = this.props;deleteItem(index);} }export default TodoItem;

React developer tools 安裝及使用

GITHUB上面的地址下載地址： https://github.com/haotian-wang/google-access-helper
下載安裝包

下載完成之后解壓，打開Chrome瀏覽器的右上角，點擊更多工具，再點擊擴展程序，打開開發者模式，點擊加載已解壓的擴展程序，可以安裝完成。

React developer tools有三種顏色，三種顏色代表三種狀態：

• 灰色：這種就是不可以使用，說明頁面不是用React編寫的。

• 黑色: 說明頁面是用React編寫的，并且處于生成環境當中。

• 紅色：說明頁面是用React編寫的，并且處于調試環境當中。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的七十六、React中的TodoList和拆分组件，组件之间的传值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。