react中的children使用方法

使用过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的功能了。

原文地址:https://www.cnblogs.com/wyangnb/p/9849018.html

时间: 2024-10-31 13:14:12

react中的children使用方法的相关文章

React中ref的使用方法

React中ref的使用方法 在react典型的数据流中,props传递是父子组件交互的唯一方式:通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信.当然,就像react官网所描述的一样,在react典型的数据量之外,某些情况下(例如和第三方的dom库整合,或者某个dom元素focus等)为了修改子组件我们可能需要另一种方式,这就是ref方式. 1.ref有两种使用方法: 1)回调函数 标签中:<input type="text" classNam

React 中使用CSS的方法

不需要组件从外部引入css文件,直接在组件中书写. import React, { Component } from "react";const div1 = { width: "300px", margin: "30px auto", backgroundColor: "#44014C", //驼峰法 minHeight: "200px", boxSizing: "border-box"

React中的this.props.children

React this.props.children this.props对象的属性与组件的属性一一对应,但是有一个例外,就是this.props.children属性.它表示组件的所有子节点. var NotesList = React.createClass({ render(){ return ( <ol> { React.Children.map(this.props.children,function(child){ return <li>{child}</li>

React 中的 AJAX 请求:获取数据的方法

React 中的 AJAX 请求:获取数据的方法 React 只是使用 props 和 state 两处的数据进行组件渲染. 因此,想要使用来自服务端的数据,必须将数据放入组件的 props 或 state 中. 首先引入 axios. 1.`import axios from 'axios';` constructor 方法非常标准,调用 super,然后初始化 state,设置一个空的 posts 数 传入新的 posts 数组,使用 this.setState 方法更新组件状态.这会导致重

在react中引入highcharts方法

Highchart在react中引入的方法为: 1.安装相关依赖 npm install  highcharts Npm install highcharts-react-offical 2.在相关模块引入: Import Hightcharts from ‘highcharts’ Import HightchartsReact from ‘highcharts-react-offical’ 如果需要某些特殊模块,则需要引入: Import highcharts3d from ‘highchar

React 深入系列1:React 中的元素、组件、实例和节点

文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中更加灵活地使用React. React 中的元素.组件.实例和节点,是React中关系密切的4个概念,也是很容易让React 初学者迷惑的4个概念.现在,老干部就来详细地介绍这4个概念,以及它们之间的联系和区别,满足喜欢咬文嚼字.刨根问底的同学(老干部就是其中一员)的好奇心. 元素 (Element) Rea

React中的fetch请求相关

fetch在reactjs中等同于 XMLHttpRequest,它提供了许多与XMLHttpRequest相同的功能,但被设计成更具可扩展性和高效性. Fetch 的核心在于对 HTTP 接口的抽象,包括 Request,Response,Headers,Body,以及用于初始化异步请求的 global fetch.得益于 JavaScript 实现的这些抽象好的 HTTP 模块,其他接口能够很方便的使用这些功能:除此之外,Fetch 还利用到了请求的异步特性--它是基于 Promise 的.

深入解析React中的元素、组件、实例和节点

React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中更加灵活地使用React. React 中的元素.组件.实例和节点,是React中关系密切的4个概念,也是很容易让React 初学者迷惑的4个概念.现在,我就来详细地介绍这4个概念,以及它们之间的联系和区别,满足喜欢咬文嚼字.刨根问底的同学的好奇心. 元素 (Element) React 元素其实就是一个简单JavaScript对象,一个React 元素和界面上的一部分DOM对应

React 中阻止事件冒泡的问题

在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡. IE9 及之前的版本只支持冒泡 | A -----------------|--|----------------- | Parent | | | | -------------|--|----------- | | |Children V | | | | --