react组件化开发涉及到组件嵌套的问题,这就会出现组件间的通信
先以一个简单的例子展示组件间的嵌套(类组件举例)
class Header extends Component{//头部组件
constructor(props){
super(props)
}
render(){
return (
我是头部
)
}
}
class Banner extends Component{//Main中嵌套的广告组件
constructor(props){
super(props)
}
render(){
return (
我是banner
)
}
}
class ShopList extends Component{//Main组件中的ShopList组件
constructor(props){
super(props)
}
render(){
return (
- 商品1
- 商品2
- 商品3
)
}
}
class Main extends Component{//Main组件
constructor(props){
super(props)
}
render(){
return (
我是主题内容
我是尾部
)
}
}
class App extends Component{
constructor(props){
super(props)
}
render(){
return (
页面结构
index为主页面,里面嵌套了三个子组件,Main里又嵌套着自己的子组件,这就涉及到各个组件通信的问题
下面先简单聊聊组建通信父传子
父传子 直接在组件上绑定属性传递数据
下面简单看一个简单的例子
父组件：
import SonCom from './SonCom'
class Father extends Component {
state = { }
render() {
return (
{/* 父传子 可以直接传字符串 或者 数组 或者对象 注意：对象或数组需要放在花括号内 */}
);
}
}
export default Father;子组件
class SonCom extends Component {
constructor(props){
super(props)
this.state={}
}
render() {
//解构
const {data1,data2,data3}=this.props
return (
{data1}
{
data2.map((item,index)=>{
return {item}
})
}
{
Object.keys(data3).map((item,index)=>{
return {data3[item]}
})
}
);
}
}
export default SonCom;父传子小结：父组件传子组件 可以通过在子组件里传入属性，子组件再通过props属性拿到父组件传过来的值
子传父小案例：
点击子导航栏，父组件的内容跟着变化
1.父组件定义事件，以属性的形式将这个事件传给子组件
2.子组件通过props属性拿到父组件传过来的事件,再把自己要传的数据通过这个事件传给父组件
父组件
import Nav from './components/Nav'
class TabControl extends Component {
constructor(props){
super(props)
console.log(this.props)
this.state = {
arr:['流行音乐','古典音乐','田园风音乐'],
num:0
}
}
render() {
return (
);
}
//父组件自定义的事件
getNum(index){
console.log(index)
//拿到子组件传过来的index赋值给num变量
this.setState({num:index})
}
}
export default TabControl;子组件：
class Nav extends Component {
state = {
arr:['流行','古典','田园风'],
num:0
}
constructor(props){
super(props)
console.log(this.props)
}
render() {
return (
{
this.state.arr.map((item,index)=>{
return - {
//给选中的导航栏加样式
this.setState({num:index})
//通过props拿到父组件传过来的函数,并把当前的Index传给父组件
this.props.toSon(index)
}}
className={this.state.num===index?'active':''}
>{item}
})
}
);
}
}
export default Nav;
小结：react中的父子组件通信，个人感觉父传子,子传父本质上没有区别,都是父组件通过属性把值传给子组件，子组件拿到值再进行自己的操作,可以把子传父理解成父传子的一种特殊情况(子传父，父组件给子组件通过属性传值,一般传字符串，数组，对象，等。父传子还是父组件通过属性给子组件传值，不同的是传的类型为父组件的自定义事件，子组件拿到这个自定义事件进行自己的操作，并把自己要传的值通过这个事件传给父元素~~~，父元素每次执行这个函数，就能拿到子元素传过来的值,这个就是子传父)
今天的分享完毕，感谢阅读