使用过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. angular 如何使用第三方组件ng-bootstrap

    1.在你的项目中以下指令    npm install --save @ng-bootstrap/ng-bootstrap 安装完成会显示 + @ng-bootstrap/ng-bootstrap@1 ...

  2. python网络编程-同步IO和异步IO,阻塞IO和非阻塞IO

    同步IO和异步IO,阻塞IO和非阻塞IO分别是什么,到底有什么区别?不同的人在不同的上下文下给出的答案是不同的.所以先限定一下本文的上下文. 本文讨论的背景是Linux环境下的network IO. ...

  3. TF-图像的深度和通道的概念(转)

    图像的深度和通道概念 图像的深度: 图片是由一个个像素点构成的,所有不同颜色的像素点构成了一副完整的图像,计算机存储图片是以二进制来进行的. 1 bit : 用一位来存储,那么这个像素点的取值范围就是 ...

  4. Docker中安装wiki Confluence

    一下内容在centos 7安装成功. 一.安装docker 1.yum安装docker yum update # 更新yum yum install docker # yum安装docker 2.开启 ...

  5. Linux网络综合命令——IP

    1.作用 ip是iproute2软件包里面的一个强大的网络配置工具,它能够替代一些传统的网络管理工具,例如ifconfig.route等,使用权限为超级用户.几乎所有的Linux发行版本都支持该命令. ...

  6. Oracle学习笔记:trunc函数

    在Oracle中可以使用trunc函数进行日期截取和数字截取,具体使用方法如下: 1.trunc(for dates) 日期截取 语法:trunc(date,[fmt]) select trunc(s ...

  7. Linux学习笔记:cat、tac、more、less、head、tail查看文件内容

    Linux下查看文件内容可以通过以下命令: cat tac more less head tail nl tailf 1.cat 由第一行开始显示内容,并将所有内容输出.当文件过大时,使用cat查看不 ...

  8. Caffe训练AlexNet网络,精度不高或者为0的问题结果

    当我们使用Caffe训练AlexNet网络时,会遇到精度一值在低精度(30%左右)升不上去,或者精度总是为0,如下图所示: 出现这种情况,可以尝试使用以下几个方法解决: 1.数据样本量是否太少,最起码 ...

  9. 8-15 Shuffle uva12174

    题意: 你正在使用的音乐播放器有一个所谓的乱序功能,即随机打乱歌曲的播放顺序.假设一共有s首歌,则一开始会给这s首歌随机排序,全部播放完毕后再重新随机排序.继续播放,依此类推.注意,当s首歌播放完毕之 ...

  10. 8-10 Coping Books uva714

    题意:把一个包含m个正整数的序列划分为k个   1<=k<=m<=500的非空连续子序列  使得每个正整数恰好属于一个序列  设第i个序列的各个数之和为 Si   你的任务是让所有的 ...