使用过vue的小伙伴都知道vue中有个slot,也就是插槽,作用就是占位,那么再react中可以使用children来替代

父组件

render(){
return(
<div>
<Grid>
我将被传递到Grid组件中
</Grid>
</div>
)
}

子组件

export default class Grid extends React.Component {
render() {
return (
<div>{this.props.children}</div>
)
}
}

这样就能够够实现slot的功能了。

react中的children使用方法的更多相关文章

  1. React中ref的使用方法

    React中ref的使用方法 在react典型的数据流中,props传递是父子组件交互的唯一方式:通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信.当然,就像reac ...

  2. React中props.children和React.Children的区别

    在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...

  3. react中常用的一些方法

    React.createClass:创建一个ReactClass(组件类),参数是一个对象且必须带有 render 属性方法,该方法必须返回一个封闭的容器(容器内可以有其它不限结构的容器)或 null ...

  4. 实现简易版react中createElement和render方法

    function createElement(type, config, children) { // 1. 创建一个对象 // 2.根据参数config修改这个对象 // 3.把children参数 ...

  5. react中怎么写css样式?

    JSX基本语法中关于react如何写css样式主要有三种方法 1.基于class --(className) 基于className ,通过className在style中给该class名的DOM元素 ...

  6. 理解React中es6方法创建组件的this

    首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...

  7. react中直接调用子组件的方法(非props方式)

    我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的. 显而易见,这个执行 ...

  8. React 源码中的依赖注入方法

    一.前言 依赖注入(Dependency Injection)这个概念的兴起已经有很长时间了,把这个概念融入到框架中达到出神入化境地的,非Spring莫属.然而在前端领域,似乎很少会提到这个概念,难道 ...

  9. React 中的 AJAX 请求:获取数据的方法

    React 中的 AJAX 请求:获取数据的方法 React 只是使用 props 和 state 两处的数据进行组件渲染. 因此,想要使用来自服务端的数据,必须将数据放入组件的 props 或 st ...

随机推荐

  1. APUE-文件和目录(二)函数access,mask,chmod和粘着位

    4.7 函数access和faccessat 当一个进程使用了设置用户ID和设置组ID作为另一个用户(或者组)运行时,这时候有效用户(组)ID和实际用户(组)ID不一样,但进程仍然希望测试实际用户(组 ...

  2. Jenkins无法安装插件或首次安装插件界面提示Offline

    一.首先点击系统管理 二.点击插件管理 三.选择高级管理 四.将升级站点中的https改成http即可

  3. springMVC源码分析--HttpMessageConverter写write操作(三)

    上一篇博客springMVC源码分析--HttpMessageConverter参数read操作中我们已经简单介绍了参数值转换的read操作,接下来我们介绍一下返回值的处理操作.同样返回值的操作操作也 ...

  4. sql中多层循环示例(有游标)

    在需求处理中,我们会遇到需要通过SQL多层循环来处理的问题.如:A表中有8条数据,B表中有10条数据,需要实现A表中的每1条数据对应B表中的10条数据,最后就有了80条数据,从而实现一对多的关系.那如 ...

  5. Linux学习笔记:crontab定时任务

    通过crontab 命令,我们可以在固定的间隔时间执行指定的系统指令或 shell script脚本.时间间隔的单位可以是分钟.小时.日.月.周及以上的任意组合.这个命令非常适合周期性的日志分析或数据 ...

  6. Oracle常用sql语句。

    最近工作中遇到了一些与oracle相关的问题,稍微整理一些工作中用到的SQL语句 时间相关 --查询距当前时间十分钟内的数据 select sysdate -interval '10' minute ...

  7. Rookey.Frame之系统初始化

    昨天介绍了数据库的配置,今天继续介绍系统的初始化功能:针对系统初始化在开发中也是很重要的一部分,它可以提前将相关数据提前自动初始化到系统中,同时也可以为上线测试提供方便,可以很方便进行系统测试演练,防 ...

  8. 【LOJ】 #2665. 「NOI2013」树的计数

    题解 我们统计深度对于bfs序统计,树结构出现分歧的地方必然是BFS序的最后一段,这个最后一段同时还得是dfs序上连续的一段 如果不是bfs序的最后一段,那么必然下一层会有节点,如果树结构分歧了,那么 ...

  9. Data时间格式化

    //时间戳转时间 function timeStamp2String(time) { var datetime = new Date(); datetime.setTime(time); var ye ...

  10. nginx卸载与安装

    1.卸载 在前面曾经安装过一次,这一次卸载再重新安装. 直接删除文件夹 2.更新软件源 3.依赖包安装 4.下载源码包并解压 5.增加用户组 6.安装 三个步骤 ./configure make ma ...