一、父组件给子组件传递数据 props
//父组件App
import { Component } from 'react';
import axios from 'axios'
import PubSub from 'pubsub-js'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css';
export default class App extends Component{
render(){
return (
<div className="App">
<Header userName='小飞侠'/>
<List />
<Footer />
</div>
);
}
}
//子组件Header
import React,{ Component } from "react";
import { nanoid } from "nanoid";//生成唯一id库
import "./index.css";
export default class Header extends Component{
render(){
return(
<div>
<span>{this.props.userName}</span>
</div>
)
}
}
二、子组件给父组件传递数据 通过函数调用的方式
//父组件App
import { Component } from 'react';
import axios from 'axios'
import PubSub from 'pubsub-js'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css';
export default class App extends Component{
//向子组件传递一个函数 通过参数来获取子组件的数据
addUserName = (name)=>{
console.log(name)
})
}
render(){
return (
<div className="App">
<Header userName='小飞侠'/>
<List addUserName = {this.addUserName } />
<Footer />
</div>
);
}
}
//子组件List
import React,{ Component } from "react";
import { nanoid } from "nanoid";//生成唯一id库
import "./index.css";
export default class List extends Component{
this.props.addUserName ('凌风')
render(){
return(
<div>
<span>1111</span>
</div>
)
}
}
三、兄弟组件传递数据 pubsub-js(消息订阅与发布机制)
- 安装插件
npm i pubsub-js 安装插件
- 在需要使用的组件页面引入插件
import PubSub from 'pubsub-js'
- 在需要获取数据的兄弟组件A中订阅消息
通过 PubSub.subscribe('MY TOPIC', (msg,data)=>{})来订阅消息
// MY TOPIC 为订阅消息的名称 , msg为消息名称可用_代替,data为接收到的数据
- 在将要发布数据的兄弟组件B中发布数据
通过 PubSub.publish('MY TOPIC', 'hello world!');来发布数据
// MY TOPIC 为发布消息的名称(必须和订阅消息名称一致) , hello world!为发布出去的数据
5.使用如下:
//兄弟组件A 订阅消息
import { Component } from 'react';
import axios from 'axios'
import PubSub from 'pubsub-js'
export default class App extends Component{
componentDidMount(){
//订阅消息 fabu001 为订阅消息名称 data为获取到的来自兄弟组件B发布的数据
PubSub.subscribe('fabu001',(_,data)=>{
console.log(data)
})
}
render(){
return (
<div>
<span>我是兄弟组件A</span>
</div>
);
}
}
//兄弟组件B 发布消息
import { Component } from 'react';
import axios from 'axios'
import PubSub from 'pubsub-js'
export default class App extends Component{
componentDidMount(){
//发布数据将数据传递给兄弟组件A
//fabu001为消息名称 必须和订阅的消息名称一致
//hello world! 为传递给兄弟组件A组件的数据
PubSub.publish('fabu001', 'hello world!');
}
render(){
return (
<div>
<b>我是兄弟组件B</b>
</div>
);
}
}
