组合方式:

1/直接嵌套的方式
2/组件以变量的形式放置
3/可以通过props值,以变量的形式相当于作为参数传递父组件,然后进行组合
import React,{Component} from 'react';
class ParentCom extends Component{
constructor(props){
super(props)
this.state={
childBg:'pink',
navCom: <NavCom />,
leftCom:<LeftCom />,
mainCom: <MainCom/>,
mainCom:props.changeMain ? props.changeMain:<Child4Com/>
}
this.changeCom= this.changeCom.bind(this)
}
render(){
// 父组件通过state
return(
<div>
<div className="nav">
{this.state.navCom}
</div>
<div className="left">
{this.state.leftCom}
</div>
<div className="main">
{this.state.mainCom}
</div>
<button onClick={this.changeCom}>更改组件</button>
</div>
)
}
changeCom(){
this.setState({
mainCom:<Child4Com/>
})
}
}
class NavCom extends Component{
 
render(){
return(
<div>
<h1>导航组件</h1>
</div>
)
}
 
}
class LeftCom extends Component{
render(){
return(
<div>
<h1>侧边内容组件</h1>
</div>
)
}
}
class MainCom extends Component{
 
render(){
return(
<div>
<h1>主要内容组件</h1>
</div>
)
}
 
}
class Child4Com extends Component{
 
render(){
return(
<div>
<h1>子组件4:判断父组件是否有传值,如果changeMain为空将mainCom改变后的组件4</h1>
</div>
)
}
}
export default ParentCom

react组件之间的组合方式的更多相关文章

  1. 前端面试 vue 部分 (5)——VUE组件之间通信的方式有哪些

    VUE组件之间通信的方式有哪些(SSS) 常见使用场景可以分为三类: 父子通信: null 父向子传递数据是通过 props ,子向父是通过 $emit / $on $emit / $bus Vuex ...

  2. React 组件之间通信 All in One

    React 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 props 2. 兄弟组件之间通信 3. 跨多层级的组件之间通信 Context API https://react ...

  3. React中组件之间通信的方式

    一.是什么 我们将组件间通信可以拆分为两个词: 组件 通信 回顾Vue系列的文章,组件是vue中最强大的功能之一,同样组件化是React的核心思想 相比vue,React的组件更加灵活和多样,按照不同 ...

  4. react组件之间传值方式

    1.父向子(通过props传值) 2.父向更深层的子(通过context传值) 3.子向父(通过回调函数传值:在父组件中创建一个函数来接收子组件传过来的参数值,通过父组件将这个函数做为子组件的属性传递 ...

  5. react组件之间的几种通信情况

    组件之间的几种通信情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1,父组件向子组件传递 React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过 ...

  6. react 组件之间传值

    谈及React时,就会想到一个很重要的思想,就是组件化思想.它将可以重用的部分进行组件化开发,形成一个个相对独立的组件,那么组件化后,你也会提出些疑问,组件与组件之间,将怎样进行信息的传递呢?下面来介 ...

  7. 使用reflux进行react组件之间的通信

    前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...

  8. Vue.js 父子组件之间通信的方式

    Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...

  9. react 组件之间的通信

    react推崇的是单向数据流,自上而下进行数据的传递,但是由下而上或者不在一条数据流上的组件之间的通信就会变的复杂.解决通信问题的方法很多,如果只是父子级关系,父级可以将一个回调函数当作属性传递给子级 ...

随机推荐

  1. bzoj2086 Blocks

    题目链接 题面 思路 可以发现其实就是询问一个最长的区间,使得这个区间的平均数大于等于k.所以将区间内所有数字减去k,然后做一遍前缀和.只要是前缀和之差大于等于0的区间.就是满足条件的. 所以现在问题 ...

  2. 收藏:win32 控件之 sysLink控件(超链接)

    来源:https://blog.csdn.net/dai_jing/article/details/8683487 手动创建syslink(msdn): CreateWindowEx(, WC_LIN ...

  3. JavaScrip相关知识总结

    1.javascript是一种基于对象的语言,其中有四个常用的“全局对象”的成员使用,因为没有“全局对象关键字global”而直接使用,所以感觉像违背了JavaScript基于对象编程的原则,但其实是 ...

  4. C++基础知识-Day5

    今天主要讲的是类的扩展 1.类成员函数的存储方式 首先我们介绍类成员函数的存储方式,C++引入面向对象的概念之后,C语言中的一些比如static/const等原有语义,作一些升级,此时既要保持兼容,还 ...

  5. java和c#中的装箱和拆箱操作

    c#装箱和拆箱 装箱:整体上来说,装箱是将值类型转换成引用类型,比如将Vector3转换成Object类型. 具体而言: 1)在托管堆中为值类型分配内存.除了原始的数值以外还应该有指向该数值的引用. ...

  6. Mybatis笔记一:写一个demo

    什么是Mybatis? 在Java中,我们连接数据库可以使用最初级的JDBC,但是这样很麻烦,每次都要写好多,所以Mybatis出现了,Mybatis可以帮我们很简单很简单的实现与数据库的读取改写操作 ...

  7. maven坑-Failure to transfer org.apache.maven:maven

    参考网址:http://www.mkyong.com/maven/how-to-convert-maven-java-project-to-support-eclipse-ide/ https://b ...

  8. JQuery1.72中二个Bug,formhtml()方法与clone()方法的二个Bug进行重写

    //扩展方法$.formhtml,解决firefox中html()方法得不到修改input值后的html代码(function ($) {    var oldHTML = $.fn.html;    ...

  9. VirtualBox虚拟机中安装XP系统

    Windows XP是一款经典的操作系统,同时也是一款很老的操作系统,不过尽管如此,还是有一批用户在使用XP系统,所以发行一些软件的时候还是要测试在XP系统中能否运行,这时候我们就可以借助Virtua ...

  10. ipython介绍及使用

    1. IPython介绍 ipython是一个python的交互式shell,比默认的python shell好用得多,支持变量自动补全,自动缩进,支持bash shell命令,内置了许多很有用的功能 ...