1.Context(上下文)
允许跨组件传值,解决多层嵌套时,逐层向下传值的问题
创建 Context,设置默认值。在没匹配到 Provider 的情况下才会接收默认值
// myContext.js
import React from 'react'
const user = {
name: 'Jerry',
age: 25,
editName: () => {} // 可传递方法
}
export const myContext = React.createContext(user) // 创建 Context,并导出
App.js 中导入 Context,并使用 Provider 向下传递数据
// App.js
import React, { Component } from 'react'
import Home from './Home'
import { myContext } from './myContext'
class App extends Component {
constructor() {
super()
this.state = {
user: {
name: 'Tom',
age: 24,
editName: this.editName // 子组件通过传递的方法,对父组件数据进行修改
}
}
}
editName = (name) => {
let user = this.state.user
user.name = name
this.setState({ user })
}
render() {
return (