使用过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. 在JAVA中记录日志的十个小建议

    JAVA日志管理既是一门科学,又是一门艺术.科学的部分是指了解写日志的工具以及其API,而选择日志的格式,消息的格式,日志记录的内容,哪种消息对应于哪一种日志级别,则完全是基于经验.从过去的实践证明, ...

  2. 洛谷P2822组合数问题

    传送门啦 15分暴力,但看题解说暴力分有30分. 就是找到公式,然后套公式.. #include <iostream> #include <cstdio> #include & ...

  3. [android]Intent跳转新的Activity可以传递数据过去

    两种方式: 一,直接通过Bundle对象来传递: 如果我们想要给“收件人”Activity说点什么的话,那么可以通过下面这封“E-mail”来将我们的消息传递出去 Intent intent=new ...

  4. Centos之帮助命令

    帮助命令man  (manual) 比如我们可以看下man命令的解释 [root@localhost ~]# man man MAN(1)                               ...

  5. centos 6.x 部署uwsgi+flask项目

    一.项目背景 1. 公司需求要做一个在线统计页面; 2. 统计在线人数,进行人数数据展示; 3. 类似QQ官网在线人数 二.测试环境 [root@linux-node2 ~]# cat /etc/*r ...

  6. CF 577A 分解因数

    输入一个n 构成一个n*n的表 这个表里的数 第i行j列的值为i*j 问x在这个表里出现了几次 Sample test(s)input10 5output2input6 12output4input5 ...

  7. bzoj 3144

    3144 思路: xxy: 代码: #include <cstdio> #include <cstring> #include <iostream> #includ ...

  8. java面试 关键字

    1. final关键字有哪些用法? 修饰类.方法和变量. (1) final变量是只读的,不允许改变其引用,与static共用可声明常量.JVM会对final变量进行优化,比如常量折叠. (2) fi ...

  9. iOS 11开发教程(三)运行第一个iOS 11程序

    iOS 11开发教程(三)运行第一个iOS 11程序 运行iOS11程序 创建好项目之后,就可以运行这个项目中的程序了.单击运行按钮,如果程序没有任何问题的话,会看到如图1.6和1.7的运行效果. 图 ...

  10. 深入理解ajax系列第二篇

    前面的话 在上一篇中,概要地介绍了XHR对象的使用.本文将详细介绍使用XHR对象发送请求的两种方式——GET和POST.下面将以实例的形式来详细说明 GET GET是最常见的请求类型,最常用于向服务器 ...