5.1利用ref属性,让父组件获取到整个子组件
先创建一个13-father.js的父组件,代码如下:
import React, { Component } from 'react' //引入React,Component
import Child2 from '../Navbar/child2' //引入子组件
export default class APP extends Component {
state = {
cname:'' //用来接收子组件的值
}
child = React.createRef() //创建ref,赋值给child
render() {
return (
<div>
<div>接收子组件的值:{this.state.cname}</div> //一开始canme内容为空
<button onClick={()=>{
this.getchild() //点击获取子组件的值的方法
}}>点击获取子组件的值</button>
<button onClick={()=>{
this.delchild()//点击删除接收子组件的值的方法
}}>点击删除接收子组件的值</button>
<button onClick={()=>{
this.delchild2() //点击删除子组件的值的方法
}}>点击删除子组件的值</button>
<Child2 ref={this.child}>
</Child2>
</div>
)
}
//点击获取子组件的值的方法
getchild(){
this.setState({
cname:this.child.current.state.name //把子组件的name值赋值给cname
})
}
//点击删除接收子组件的值的方法
delchild(){
this.setState({
cname:'' //把cname赋值为空
})
}
//点击删除子组件的值的方法
delchild2(){
this.child.current.setState({
name:'' //把子组件的name值赋值为空
})
}
}
创建子组件child2,代码如下:
import React, { Component } from 'react'
export default class Child2 extends Component {
state = {
name: '张三'
}
render() {
return (
<div>
<div>
子组件的值:{
this.state.name //渲染name值
}
</div>
</div>
)
}
del(){ //删除name的值
this.setState({
name:''
})
}
}
5.2利用Context进行传值
创建一个16-利用Context进行传值.js文件作为父组件
import React, { Component } from 'react' //引入React,Component
import Child3 from '../Navbar/child3' //引入子组件Child3
import Child4 from '../Navbar/child4' //引入子组件Child4
import '../../mock/api1' //引入mock文件
import axios from 'axios' //引入axios
import '../assembly/css/15-demo.less' //引入样式文件
const Context = React.createContext() //创建context对象
export default class APP extends Component {
constructor() {
super()
this.state = ({
lists: [],//定义lists变量用来接收mock模拟数据传过来的数据
info: '' //定义info用来作为点击事件后进行传值
})
axios.get('/test').then(res => {//利用axios获取mock数据
this.setState({
lists: res.data.list //接收mock模拟数据传过来的数据
})
})
}
render() {
let newlist = this.state.lists.map(item => map方法遍历lists中的每一项,item是每一项
<Child3 key={item.id} list={item.name} Context={Context}></Child3> //id是key,name是每一项的内容,Context是把context对象传过去
)
//定义一个对象作为Context.Provider的value值
const cdata = {
info: this.state.info, //info用来作为点击事件后进行传值
changeinfo(value) { //更新info状态方法
this.setState({
info: value //获取最新的info
})
}
}
return (
<Context.Provider value={ //Provider用来将当前的 value 传递给以下的组件树。
cdata //Context.Provider的value值
}>
<div className='box'>
<div className='child3'>
{
newlist //渲染newlist
}
</div>
<Child4 className='child4' Context={Context} //Context是把context对象传过去
></Child4>
</div>
</Context.Provider>
)
}
}
child3子组件
import React, { Component } from 'react'
export default class Child3 extends Component {
render() {
const { list, Context } = this.props //解构父组件传过来的值,list作为传过来的lists中的每一项,Context作为传过来的context对象
return (
<Context.Consumer>
{
(value) => { //接收Provider的value值
return (
<div onClick={() => { //获取list值点击事件
value.changeinfo(list) //获取list值
}}>
{
list
}
</div>
)
}
}
</Context.Consumer>
)
}
}
child4子组件
import React, { Component } from 'react'
export default class Child4 extends Component {
render() {
const { Context } = this.props //Context作为传过来的context对象
return (
<Context.Consumer>
{
(value) => {
return (
<div>
{
value.info //渲染点击过后传过来的值
}
</div>
)
}
}
</Context.Consumer>
)
}
}