使用过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. shell 指令分析nginx 日志qps

    实时分析 tail -f points.api.speiyou.cn.access.log|awk 'BEGIN{key="";cnt=0}{if(key==$5){cnt++}e ...

  2. 简易博客[ html + css ] 练习

    1. 前言 通过使用 html + css 编写一个简易的博客作为入门练习 2. 代码及实现 2.1 目录结构 2.2 代码部分 <!DOCTYPE html> <html lang ...

  3. 前端打包工具之fis3的初级使用

    说到打包工具,大家都会想到webpack,我之前也接触过webpack,说实话个人觉得webpack上手容易,但是对于新手来说里面有太多坑,配置文件也不简单.于是乎,我转入了fis3阵营,发现fis3 ...

  4. 洛谷P3119 草鉴定

    这个题调了一天.. 传送门 读完题目之后我们不难想出这个题是个tarjan缩点问题,因为尽量多的经过草场,所以一号点所在的强连通分量里左右的点都是不需要在进行走逆向边,所能到达的. 然后问题就落在怎么 ...

  5. HDU 2476 String painter(区间DP+思维)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2476 题目大意:给你字符串A.B,每次操作可以将一段区间刷成任意字符,问最少需要几次操作可以使得字符串 ...

  6. Oracle学习笔记:11g服务介绍及哪些服务必须开启?

    由于工作环境中oracle版本为10g,不支持行转列函数pivot,特在自己电脑上安装了oracle 11g,但因为不经常使用,便把服务自动启动给关闭了,只在需要使用时手动启动,因此记录一下需要启动的 ...

  7. MySQL学习笔记:limit

    MySQL支持用limit语句来设置查询的行数范围,同Hive. LIMIT a, b; a:从a+1开始: b:取b行数据: 1.取出第一行记录: ,; 2.取出第二行记录: ,; 3.取出从11开 ...

  8. CVE-2013-2729 Adobe Reader和Acrobat 数字错误漏洞

    这个洞是在论坛里看到的,感觉很有意思,来学习一下.个人感觉IE或者说是浏览器的洞和Adobe洞都是比较难调的,主要是有大量的类难以摸清之间的关系. 这个洞是一个整数溢出的洞,这个不是重点.重点是利用的 ...

  9. chromiumFx编译使用

    CEF chormeFx 为针对.Net的CEF框架,下载链接为: https://bitbucket.org/chromiumfx/chromiumfx 点击Download可以下载chromium ...

  10. day8--by a gentlement man

    1.着装得体(不要国产.不要Jack&Johnson.selected),人都是势利眼,高素质和低素质人的区别,高素质是心里明白歧视你,但是不说:低素质是直接表示出来:lower,屌丝     ...