首页 > 其他分享 >React学习笔记07-组件嵌套

React学习笔记07-组件嵌套

时间:2023-10-19 10:45:54浏览次数:37  
标签:return 07 render Component React 嵌套 extends 组件 class

一个项目肯定是由多个组件构成的,组件之前必然会存在相互嵌套的关系

在react中如果想要将一个组件嵌入到另外一个组件中

只需要在父组件的render函数的返回值中放入子组件即可

请看下面代码

import React, { Component } from "react"
class Navbar extends Component {
    render() {
        return (
            <div>
                这是Navnar
                <NavbarChild></NavbarChild>
            </div>
        )
    }
}
class Swiper extends Component {
    render() {
        return (
            <div>
                这是Swiper
            </div>
        )
    }
}
class Tabbar extends Component {
    render() {
        return (
            <div>
                这是Tabber
            </div>
        )
    }
}
class NavbarChild extends Component {
    render() {
        return (
            <div>
                我是navbar的孩子
            </div>
        )
    }
}
export default class App extends Component {
    render() {
        return (
            <div>
                <Navbar></Navbar>
                <Swiper></Swiper>
                <Tabbar></Tabbar>
            </div>
        )
    }
}
/* 
    
*/

 

标签:return,07,render,Component,React,嵌套,extends,组件,class
From: https://www.cnblogs.com/SadicZhou/p/17774168.html

相关文章

  • React学习笔记05-类组件
    ES6的加入让JavaScript直接支持使用class来定义一个类,react创建组件的方式就是使用的类的继承,ES6class是目前官方推荐的使用方式,它使用了ES6标准语法来构建,看以下代码importReactfrom'react'importReactDOMfrom'react-dom'classAppextendsReact.Component{rend......
  • [ABC207F] Tree Patrolling 题解
    [ABC207F]TreePatrolling弱智DP题,设\(f(i,j,0/1/2)\)表示在点\(i\),子树中有\(j\)个点被覆盖,且\(i\)点自身状态是未被覆盖/被自身覆盖/被某个儿子覆盖,然后树上背包更新就行了。代码:#include<bits/stdc++.h>usingnamespacestd;#defineintlonglongconstintmo......
  • [ARC072E] Alice in linear land 题解
    [ARC072E]Aliceinlinearland首先,一个trivial的想法是记\(f_i\)表示第\(i\)步前离终点的距离,于是\(f_i=\min\Big(f_{j-1},|f_{j-1}-d_i|\Big)\)。然后,我们设\(f_i'\)表示在修改第\(i\)步后,此时离终点的距离。明显,\(f_i'\)可以为任意不大于\(f_i\)的值,因为此时......
  • 【Vue3响应式入门#01】Reactivity
    专栏分享:vue2源码专栏,vue3源码专栏,vuerouter源码专栏,玩具项目专栏,硬核......
  • LeetCode02.07. 链表相交
    描述给你两个单链表的头节点headA和headB,请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点,返回null。示例提交的代码publicclassSolution{publicListNodegetIntersectionNode(ListNodeheadA,ListNodeheadB){//分别计算A和B链表......
  • react + electron 打包记录
    package.json中的更改:增加: "homepage":"./",  "build":{  "productName":"xxxx",  "appId":"com.xxx.win",  "directories":{   "output":"dist&quo......
  • 嵌套属性
    实施简化的_.get使用自定义customGet功能object:我们要从中检索嵌套属性的对象。path:表示所需属性的路径的字符串,其中嵌套属性以点分隔。defaultValue(可选):未找到属性时返回的默认值......
  • react数据管理之setState与Props
    react数据管理之setState与PropssetState调用原理setState是React中用于更新组件状态(state)的方法。它的调用原理可以分为以下几个步骤:状态的改变:当调用setState时,React会将新的状态对象与当前状态对象进行合并(合并过程是浅合并)。React不会直接修改当前状态对象,而是创建一个......
  • react 公司项目学习 【react+webpack+nw.js + mobx+react-intl 实现的多页面多语言win
    这几天突然要来个react项目;听说还比较复杂;项目组内就两个人会react还在忙,整组主要是用vue;这不,这种‘狗都不干’的事,被安排到我身上了,那就学吧;一、研究代码结构不得不说,这目录结构搞得有点复杂,算是我接触中除了乾坤和electron之外,相当复杂的了,慢慢阅读吧;看懂了,原来是react+web......
  • P7077 [CSP-S2020] 函数调用
    显然函数之间的调用关系形成了一张拓扑图,预处理出函数\(i\)或其内部所有乘法之积\(mul_i\)。在调用一个加法函数后调用一个乘法函数,等价于先调用这个乘法函数,然后调用这个加法函数乘数次。所以不妨让乘法函数先做,剩下加法函数产生的贡献只取决于加数和调用次数。这里和线段树......