相關文章 React Context的使用方法
跨幾個組件傳遞值或者方法的時候, 如果依賴父子組件傳值, 那勢必會很麻煩. 好在react提供了Provider 和 Consumer
1 調用react的createContext()方法, 產生生產者和消費者組件.
// context.js
import React from 'react'
let { Consumer, Provider } = React.createContext();
export {Consumer,Provider
}
在父(祖先)級組件中, 把要傳遞東西的后代組件包起來, 要傳遞的東西放進value里面, value是一個對象, 所以看著像雙括號語法, 其實不是.
import React from 'react'
import List from './List'
import {Provider} from './context'
export default class TodoWrapper extends React.Component {state = {list: []}task = React.createRef()handleClick = () => {let list = [...this.state.list, this.task.current.value]this.setState({list: list})this.task.current.value = ''}deleteTask = (index) => {let list = this.state.listlist.splice(index, 1)this.setState({list: list})}render() {return (<Provider value={{deleteTask: this.deleteTask}}><input type="text" ref={this.task}/><button onClick={this.handleClick}> Add </button><List list={this.state.list} deleteTask={this.deleteTask}/></Provider>);}
}
后代組件中的組件放在Consumer里面, 內部是一個函數, 這個函數接受一個對象作為參數, 參數是Provider里面提供的值. 然后直接使用就可以了.
import React from 'react'
import {Consumer} from './context'export default class List extends React.Component{render() {const { list } = this.propsreturn (<Consumer>{({ deleteTask }) => {return list.map((item, index) => {return (<li key={item + index}>{ item }<button onClick={()=>{deleteTask(index)}}> delete </button></li>)})}}</Consumer>);}
}
)
