目录
1.子组件向父组件传值
1.1 代码
// 父组件
class Parent extends React.Component{
state = {
parentMsg:''
}
getChildMsg = (data) => {
console.log(data);
this.setState({
parentMsg : data
})
}
render(){
return(
<div className='parent'>
{
/* 父组件 */}
父组件:{
this.state.parentMsg}
<Child getMsg={
this.getChildMsg} />
</div>
)
}
}
//子组件
class Child extends React.Component {
state = {
msg:'上号'
}
handleClick = () => {
//子组件调用父组件中传递过来的回调函数
this.props.getMsg(this.state.msg)
}
render(){
return(
<div className='child'>
<p>子组件<button onClick={
this.handleClick}>传递给父组件</button></p>
</div>
)
}
}
const container = createRoot(document.getElementById('root'))
container.render(<Parent />)
1.2 效果
点击
button
后:
1.3 原理
- 利用回调函数,父组件提供回调,子组件调用,将要传递的数据作为回调函数的参数
- 父组件提供一个回调函数,用来接收数据
- 将该函数作为属性的值,传递给子组件
- 子组件通过props调用回调函数
2.父组件向子组件传值
2.1 代码
//父组件
class Parent extends React.Component{
state = {
lastName:'张'}
render(){
return(
<div className='parent'>
父组件
传递给子组件<Child name={
this.state.lastName} />
</div>
)
}
}
//子组件
const Child = (props) =>{
return (
<div className='child'>
<p>子组件,接收到父组件的数据:{
props.name}</p>
</div>
)
}
const container = createRoot(document.getElementById('root'))
container.render(<Parent />)
2.2 效果
2.3 原理
- 父组件提供要传递的state数据
- 给子组件标签添加属性,值为state中的数据
- 子组件中通过props接收父组件中传递的数据
3.兄弟传值
3.1 代码
//父组件
class Counter extends React.Component {
//通过共享状态
state = {
count : 0
}
//提过修改状态的方法
onIncrement = () => {
this.setState({
count:this.state.count + 1
})
}
render(){
return(
<div>
<Child1 count={
this.state.count} />
<Child2 onIncrement={
this.onIncrement} />
</div>
)
}
}
const Child1 = (props) => {
return <h1>计数器:{
props.count}</h1>
}
const Child2 = (props) => {
return <button onClick={
() => props.onIncrement()}>+1</button>
}
const container = createRoot(document.getElementById('root'))
container.render(<Counter />)
3.2 效果
点击button
便会加一
3.3 原理
- 将共享状态(数据)提升到最近的公共父组件中,由公共父组件管理这个状态
- 这个称为状态提升
- 公共父组件职责:1. 提供共享状态 2.提供操作共享状态的方法
- 要通讯的子组件只需要通过props接收状态或操作状态的方法
4.Context
如果出现层级比较多的情况下(例如:爷爷传递数据给孙子),我们会使用Context来进行传递
作用: 跨组件传递数据
4.1 代码
// Provider提供者: Consumer:消费者
const {
Provider,Consumer } = React.createContext()
class App extends React.Component{
render(){
return(
<div className='app'>
<Node />
</div>
)
}
}
const Node = (props) => {
return(
<Provider value='Zhang'>
<div className='subnode'>
<Child/>
</div>
</Provider>
)
}
const Child = (props) => {
return <div className='child'>
<Consumer>
{
data => <span>子节点:{
data}</span>
}
</Consumer>
</div>
}
const container = createRoot(document.getElementById('root'))
container.render(<App />)
4.2 效果
4.3 原理
- 如果两个组件相隔层级比较多,可以使用Context实现组件通讯
- Context提供了两个组件:Provider 和 Consumer
- Provider组件: 用来提供数据
- Consumer组件: 用来消费数据