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

@Author：Runsen

這東西已經(jīng)有很多大佬們寫過(guò)了，就不多班門弄斧了。主要使用這個(gè)例子入門 React ，包括 state、props、組件間通信這些基礎(chǔ)內(nèi)容。Todo List 應(yīng)用通常都被列為能入手開(kāi)發(fā)項(xiàng)目的 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 是組件在渲染自身時(shí)用到的數(shù)據(jù)。我們可以通過(guò) this.state 獲得自己在 state 里定義的數(shù)據(jù)。this.state = {inpuValue : '',list: []}}render(){return (<Fragment ><div>{/* label中的htmlFor和input中的id一致，實(shí)現(xiàn)點(diǎn)擊label標(biāo)簽，光標(biāo)聚焦到input輸入框中 */}<label htmlFor="insertArea">輸入內(nèi)容</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，當(dāng)this.setState()被調(diào)用時(shí)，React 會(huì)調(diào)用組件的 render() 方法重新渲染組件。需要提到的是 this.setState() 是異步的。this.setState({inpuValue: e.target.value})}handleBtnClick() {this.setState({list: [...this.state.list,this.state.inpuValue],inpuValue : ''})}handleItemDelete(index) {// state 不允許我們做任何改變 不能改變數(shù)據(jù)，需要復(fù)制一份出來(lái)// ...this.state.list ES6中新加入的數(shù)組展開(kāi)運(yùn)算符，將數(shù)組展開(kāi)為列表// 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拆分成兩個(gè)組件。

React數(shù)據(jù)流動(dòng)是單向的，父組件向子組件通信也是最常見(jiàn)的。父組件通過(guò)props 向子組件傳遞需要的信息。

TodoList.js

import React, { Component, Fragment } from 'react'; import TodoItem from './TodoItem'; import './style.css';class TodoList extends Component {// React數(shù)據(jù)流動(dòng)是單向的，父組件向子組件通信也是最常見(jiàn)的。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">輸入內(nèi)容</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遍歷數(shù)組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() {// 父組件通過(guò) props 向子組件傳遞需要的信息。直接使用this.props取出即可const { content } = this.props;return (<div onClick={this.handleClick}>{content}</div>)}handleClick() {// deleteItem是方法，當(dāng)點(diǎn)擊刪除事件發(fā)生，父?jìng)髯觕onst { deleteItem, index } = this.props;deleteItem(index);} }export default TodoItem;

React developer tools 安裝及使用

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

下載完成之后解壓，打開(kāi)Chrome瀏覽器的右上角，點(diǎn)擊更多工具，再點(diǎn)擊擴(kuò)展程序，打開(kāi)開(kāi)發(fā)者模式，點(diǎn)擊加載已解壓的擴(kuò)展程序，可以安裝完成。

React developer tools有三種顏色，三種顏色代表三種狀態(tài)：

• 灰色：這種就是不可以使用，說(shuō)明頁(yè)面不是用React編寫的。

• 黑色: 說(shuō)明頁(yè)面是用React編寫的，并且處于生成環(huán)境當(dāng)中。

• 紅色：說(shuō)明頁(yè)面是用React編寫的，并且處于調(diào)試環(huán)境當(dāng)中。

與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。