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

父组件

  1. render(){
  2. return(
  3. <div>
  4. <Grid>
  5. 我将被传递到Grid组件中
  6. </Grid>
  7. </div>
  8. )
  9. }

子组件

  1. export default class Grid extends React.Component {
  2. render() {
  3. return (
  4. <div>{this.props.children}</div>
  5. )
  6. }
  7. }

这样就能够够实现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. mysql -> 简介&体系结构_01

    数据库简介 数据库,简而言之可视为电子化的文件柜——存储电子文件的处所,用户可以对文件中的数据运行新增.截取.更新.删除等操作. 所谓“数据库”系以一定方式储存在一起.能予多个用户共享.具有尽可能小的 ...

  2. python网络编程-进程间数据通信(Queue,Pipe ,managers)

    一:进程间数据交换方法 不同进程间内存是不共享的,要想实现两个进程间的数据交换,可以用以下方法: Queue,Pipe ,managers 1)Queue,使用方法跟threading里的queue差 ...

  3. python基础-类的封装

    封装:类中封装了公有属性和方法,对象封装了私有属性的值 class F1: def __init__(self,n): self.N=n print('F') class F2: def __init ...

  4. 移动web特殊样式处理

    一.高清图片 二.一像素边框 还有一种解决办法: border-1px($color) position: relative &:after display: block position: ...

  5. TypeScript的配置文件 tsconfig.json

    //tsconfig.json指定了用来编译这个项目的根文件和编译选项 { "compilerOptions": { //compilerOptions:编译选项,可以被忽略,这时 ...

  6. 获取随机字符串的方法 GetRandomString

    方法1:推荐方便. System.Hash 单元 Memo1.Lines.Add(THash.GetRandomString(50)); 方法二(自己写的): function TStrApi.Sui ...

  7. 查找sqlserver数据库中,查询某值所表名和字段名

    有时候我们想通过一个值知道这个值来自数据库的哪个表以及哪个字段,通过一个存储过程实现的.只需要传入一个想要查找的值,即可查询出这个值所在的表和字段名. 前提是要将这个存储过程放在所查询的数据库. CR ...

  8. MySQL学习笔记:delete

    使用 SQL 的 DELETE FROM 命令来删除 MySQL 数据表中的记录. 语法: DELETE FROM table_name [WHERE Clause] 如果没有指定 WHERE 子句, ...

  9. Java将字符串转成二进制码

    Java将字符串转成二进制码 public void toBinary(){ String str = "王雪"; char[] strChar=str.toCharArray() ...

  10. 编译原理之正则表达式转NFA

    本文转载自http://chriszz.sinaapp.com/?p=257 输入一个正则表达式,输出一个NFA. 我的做法:输入一个字符串表示正则,输出则是把输出到一个.dot文件中并将dot文件编 ...