组件基本使用
import React, { Component } from 'react'; // 在组件头部引用 class Home extends Component { // 创建类 render(){ // 将页面通过return返回给调用者 必须有一个根节点包裹 同vue的使用
return(
<div>
<h3>组件中的节点要被一个根节点包裹起来</h3>
</div>
)
} }
export default Home 将该组件暴露出去 在需要调用的地方import Home from '/path'
直接在父组件中使用Home标签即可 另一种定义子组件的方式
import React from 'react'
class New extends React.Component{
constructor(props) {
super(props) //用于父子组件传值 类下面的构造器是必写的,可用于改变this的指向
this.state = {
user : '张三'
}
}
render() {
return (
<div class="root">
<h2>{this.state.user}</h2> // 数据绑定
<h3>这是newd的跟节点</h3>
</div>
)
} }
export default New

react中创建组件以及使用的更多相关文章

  1. react中创建组件

    第1种 - 创建组件的方式 > 使用构造函数来创建组件,如果要接收外界传递的数据,需要在 构造函数的参数列表中使用`props`来接收:> 必须要向外return一个合法的JSX创建的虚拟 ...

  2. React中创建组件的3种方式

    目前作者所知道的创建react组件的方式有三种: 函数式定义(无状态组件) function MyComponent(props){ return( <h1>mycomponent< ...

  3. React中父子组件数据传递

    Vue.js中父子组件数据传递:Props Down ,  Events Up Angular中父子组件数据传递:Props Down,  Events  Up React中父子组件数据传递:Prop ...

  4. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

  5. React中父子组件间的通信问题

    1.https://blog.csdn.net/sinat_17775997/article/details/59103173 (React中父子组件间的通信问题)

  6. 在angular7中创建组件/自定义指令/管道

    在angular7中创建组件/自定义指令/管道 组件 使用命令创建组件 创建组件的命令:ng generate component 组件名 生成的组件组成: 组件名.html .组件名.ts.组件名. ...

  7. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  8. 什么是React中的组件

    组件就是页面上的一部分.如图,左边是一个网页.右边是对应的一个组件图.我们可以把一个大的网页拆分成很多小的部分.比如标题部分,对应一个组件,就是标题组件.搜索部分,对应的组件就是搜索组件.而这个搜索组 ...

  9. React中父子组件传值

    一.首先我们先来看父组件向子组件传值 1.1 我们要明白父组件 --> 子组件 是通过props这个属性来传值的 我们来看父组件的代码 import React from 'react'; im ...

随机推荐

  1. Python爬虫-- BeautifulSoup库

    BeautifulSoup库 beautifulsoup就是一个非常强大的工具,爬虫利器.一个灵活又方便的网页解析库,处理高效,支持多种解析器.利用它就不用编写正则表达式也能方便的实现网页信息的抓取 ...

  2. Ubuntu12.04如何修改窗口背景色为眼睛保护色来保护眼睛,强力推荐!!

    最近突然发现盯着屏幕看的久了,眼睛会非常的痛苦,因此想改变一下系统的窗口背景颜色.其实看代码主要是在Eclipse里面察看,因此一开始我就想改变Eclipse的文本编辑框的背景颜色,效果如下图所示. ...

  3. 我的Android进阶之旅------>Android图片处理(Matrix,ColorMatrix)

    本文转载于:http://www.cnblogs.com/leon19870907/articles/1978065.html 在编程中有时候需要对图片做特殊的处理,比如将图片做出黑白的,或者老照片的 ...

  4. 腾讯云上运行java程序过程

    1: 购买服务器(腾讯云,阿里云等) 2:安装centos操作系统: 3:安装jdkhttp://www.cnblogs.com/Amos-Turing/p/7403696.html 4:安装数据库( ...

  5. 关于SAP的编码范围

    [转自 http://blog.sina.com.cn/s/blog_6466e5f70100ithw.html ] 1.Number Range的通用Tcode:SNRO 2.Number Rang ...

  6. Java for LeetCode 111 Minimum Depth of Binary Tree

    Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the shor ...

  7. html5--1.11列表

    html5--1.11列表 学习要点: 无序列表 有序列表 列表的属性 自定义列表 1.无序列表的基本格式 ul(unorder line)标签里面放li标签就好了,每一项就是一个li(LineIte ...

  8. PSPnet:Pyramid Scene Parsing Network——作者认为现有模型由于没有引入足够的上下文信息及不同感受野下的全局信息而存在分割出现错误的情景,于是,提出了使用global-scence-level的信息的pspnet

    from:https://blog.csdn.net/bea_tree/article/details/56678560 2017年02月23日 19:28:25 阅读数:6094 首先声明,文末彩蛋 ...

  9. SpringBoot_01_正确、安全地停止SpringBoot应用服务

    二.参考资料 1.正确.安全地停止SpringBoot应用服务

  10. 《java编程思想》:第五章,初始化与清理

    知识点整理: 1.从概念上讲,‘初始化’与‘创建’是彼此独立的,但是在Java中,两者被捆绑在一起,不可分离. 2.区分重载的方法:每个重载的方法都有一个独一无二的参数类型列表. 甚至参数顺序的不同也 ...