使用过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. DevExpress GridControl 的数据绑定

    本人不才啊,折腾2个多小时才把数据绑定好.现在把折腾过程记录一下来以帮助更多的朋友,自己也温习一下. 直接上代码了哈.... WPF哈 xaml文件 <dxg:GridControl Name= ...

  2. MongoDB安全:所有操作(Privilege Actions)

    本文展示了两张思维导图,分别是MongoDB 3.6.4.0的所有权限操作,未做深入研究,仅仅是列出来. 3.6总共9类105个操作,4.0版本比3.6多了两类操作,同时增加了3个操作,共11类108 ...

  3. POJ 3286 How many 0's(数位DP模板)

    题目链接:http://poj.org/problem?id=3286 题目大意: 输入n,m,求[n,m]的所有数字中,0出现的总数是多少,前导零不算. 解题思路: 模板题,设dp[pos][num ...

  4. matlab转python

    最近在做把matlab代码转成python代码,没有用过matlab,python也只是局限于爬虫,所以.... matlab与python最大的不同是,matlab的下标是从1开始的,python和 ...

  5. GreenPlum学习笔记:date_part与extract提取日期时间、时间差

    GP可以使用date_part / extract从日期时间类型中抽取部分内容. 方法一:extract 格式:extract(field from source)  extract函数从日期.时间数 ...

  6. PHP 识别 java 8位 des 加密和 解密方式

    代码及使用说明: <?php /** *PHP 识别 java 8位密钥的加密和解密方式 *@desc 加密方式 通用 */ class DES { var $key; var $iv; //偏 ...

  7. hmm学习笔记(二)

    学习hmm近一周的时间,做个总结. 参考  李航的<统计学习方法>第9章,第10章 本文包含: 1.hmm模型 2.前向后向算法 3.Baum-Welch算法 4.维特比算法 1.hmm模 ...

  8. 牛客练习赛3 B - 贝伦卡斯泰露

    链接:https://www.nowcoder.net/acm/contest/13/B来源:牛客网 题目描述 贝伦卡斯泰露,某种程度上也可以称为古手梨花,能够创造几率近乎 为0的奇迹,通过无限轮回成 ...

  9. linux 下安装jdk环境安装

    一.创建jdk安装目录mkdir /usr/local/java 二.将jdk解压到安装目录中,直接到java目录中,如果不是处理下不要有子目录 tar -zxvf jdk-8u91-linux-x6 ...

  10. Android与GPL、BSD和Apache之间的关系

    参考资料 Android ,在争议中逃离 Linux 内核的 GPL 约束 | 爱范儿 简介 众所周知,Linux内核基于GPL v2发行.GPL规定,基于GPL的软件产品的衍生产品,也必须使用GPL ...