一、子组件传父组件
新建组件Childtheparent.js
写入:
import React, { Component } from 'react'
class Navbar extends Component {
render() {
return (
<div style={{background: "red"}}>
<button onClick={() => {
// console.log(this.props.event)
this.props.event()
}}>click</button>
<span>navbar</span>
</div>
)
}
}
class Sidebar extends Component {
render() {
return (
<div style={{background: "green", width: "100px"}}>
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
</div>
)
}
}
export default class Childtheparent extends Component {
state = {
isShow: false
}
eventHandle = () => {
console.log('父组件定义函数')
this.setState({
isShow: !this.state.isShow
})
}
render() {
return (
<div>
<Navbar event={this.eventHandle}></Navbar>
{this.state.isShow && <Sidebar></Sidebar>}
</div>
)
}
}
可以看到子传父的话,子组件接收一个父组件传进来的回调函数,点击时执行即可。
效果:
二、选项卡案例应用(受控组件)
在我的这篇选项卡案例博客中进行修改。
新建一个TabLi.js
将选项卡列表写到这个组件中:
import React, { Component } from 'react'
export default class TabLi extends Component {
state = {
list: [
{
id: 1,
name: '电影'
},
{
id: 2,
name: '影院'
},
{
id: 3,
name: '我的'
}
],
lIndex: 0
}
render() {
return (
<div>
<ul>
{
this.state.list.map((item, index) =>
<li onClick={() => {
this.indexHandle(index)
}} className={this.state.lIndex === index ? 'active' : ''} key={item.id}>{item.name}</li>
)
}
</ul>
</div>
)
}
indexHandle(index) {
this.setState({
lIndex: index
})
this.props.event(index)
// 该通知父组件修改lIndex
}
}
可以看到Tab.js
组件中引入这个组件了,并且传递了一个回调函数到子组件,让子组件更改父组件的lIndex
让父组件正确的显示那个组件。
接下来我们新建一个Headerbar.js
组件:
import React, { Component } from 'react'
export default class Headerbar extends Component {
render() {
return (
<div style={{background: "yellow", textAlign: "center", overflow: "hidden"}}>
<button style={{float: "left"}}>back</button>
<span>卖座电影</span>
<button style={{float: "right"}} onClick={() => {
console.log(this.props.event)
this.props.event()
}}>center</button>
</div>
)
}
}
可以看到点击center
按钮触发了父组件的回调函数,父组件的回调函数就是将组件切换到我的组件:
但是底部子组件却有自己的状态不跟着父组件的状态,所以高亮显示不过去,那我们怎么让这个子组件不要有自己的状态,形成一个受控组件,跟随父组件的状态呢,将TabLi.js
写成函数式组件:
// import React, { Component } from 'react'
import React from 'react'
export default function TabLi(props) {
// function indexHandle(index){
// props.event(index)
// // 该通知父组件修改lIndex
// }
return (
<div>
<ul>
{
props.list.map((item, index) =>
<li onClick={() => props.event(index)} className={props.lIndex === index ? 'active' : ''} key={item.id}>{item.name}</li>
)
}
</ul>
</div>
)
}
// export default class TabLi extends Component {
// render() {
// return (
// <div>
// <ul>
// {
// this.props.list.map((item, index) =>
// <li onClick={() => {
// this.indexHandle(index)
// }} className={this.props.lIndex === index ? 'active' : ''} key={item.id}>{item.name}</li>
// )
// }
// </ul>
// </div>
// )
// }
// indexHandle(index) {
// this.props.event(index)
// // 该通知父组件修改lIndex
// }
// }
受控组件不要有自己的状态,全部通过父组件传过来的状态:
效果:
可以看到我们点击center
按钮也跳到了我的组件,并且底部也高亮。
在学习React的路上,如果你觉得本文对你有所帮助的话,那就请关注点赞评论三连吧,谢谢,你的肯定是我写博的另一个支持。