react中如何使用组件

react中如何使用组件

前文我们介绍过了《如何写react组件》(感兴趣的同学可以过去学习),下面我们来说一下如何使用react组件。

1、无状态组件的使用方法

组件:

const App = (props) => <h1>欢迎进入{props.name}的世界</h1>

使用:

ReactDOM.render(
  // React组件的调用方式
  <App name="react" />,
  document.getElementById('root')
)

2、ES6创建的组件的使用方法()

组件:

class App extends React.Component{
    render(){
        return(
            console.log(this),//此处的this指的就是App组件,自定义在App上的属性就在this的props上
            <h1>Hello {this.props.name}React!</h1>
        )
    }
}

使用:

ReactDOM.render(
    <App name="1905"/>,//在App组件上自定义一个name的属性
    document.getElementById('root')
)
Image placeholder
前端答疑
未设置
  20人点赞

没有讨论,发表一下自己的看法吧

推荐文章
.vue文件怎么使用组件?

.vue文件怎么使用组件?在vue中组件以.vue结尾,一个.vue文件就是一个组件。下面介绍下在组件中使用其他组件的方法。(相关课程推荐:Vue.js教程)1、首先创建一个组件MyTest.vue

如何将echarts集成到react中

如何将echarts集成到react中在使用echarts之前需要先安装echarts,可以直接使用node命令来安装npminstallecharts--save包依赖安装完毕后,这个时候我们的EC

怎么在react中使用weui

怎么在react中使用weui1、react没有安装的情况下:安装react和weuinpminstall--savereactreact-dom npminstall--saveweui@1.1.0

怎么在react中安装修饰器

怎么在react中安装修饰器在create-react-app下使用es7的@修饰器会报错''Supportfortheexperimentalsyntax'decorators-legacy'isn

在react中怎么引用js

在react中怎么引用js推荐两种引入的方法,当然也可以自己编写一个JS类(ES6语法)实现动态插入JS到页面,然后在React项目引入。第一种:使用插件react-load-script如果没有安装

react中的webpack是什么?

Webpack是一个开源的前端打包工具。Webpack提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。Webpack可以从终端、或是更改webpack.config

如何在JavaScript中操作数组?

JavaScript中的数组是什么?在开始之前,你需要先了解数组的真正含义。在JavaScript中,数组是一个用于存储不同数据类型的变量。它将不同的元素存储在一个盒子中,供以后使用。声明一个数组:l

零基础学习Swift中的数据科学

概述Swift正迅速成为数据科学中最强大、最有效的语言之一Swift与Python非常相似,所以你会发现2种语言的转换非常平滑我们将介绍Swift的基础知识,并学习如何使用该语言构建你的第一个数据科学

JavaScript中对“this”的简单理解

1.this的奥秘很多时候,JS中的this对于咱们的初学者很容易产生困惑不解。this的功能很强大,但需要一定付出才能慢慢理解它。对Java、PHP或其他标准语言来看,this表示类方法中当前对象的

JavaScript中的强制类型转换

JavaScriptprimitives(原语)JavaScript建立在一系列基本单元之上。你应该对其中的一些已经很熟悉了,比如字符串和数字:vargreet="Hello";varyear=89;

JavaScript中的Infinity(无穷)

Infinity(无穷)在JS中是一个特殊的数字,它的特性是:它比任何有限的数字都大,如果不知道Infinity,我们在一些运算操作遇到时,就会觉得很有意思。现在我们来看看JS中的Infinity属性

使用$emit传参:如何同时接收父组件和子组件的参数?

需求描述:组件内部发射事件并且有参数传递出来,然后监听该事件时,事件处理程序又同时需要获取组件外面传进来的参数举个例子:tag-input组件监听change事件 methods:{ ...,

如何使用react做安卓app

如何使用react做安卓app一、首先,我们先创建一个react项目作为演示。1.全局安装create-react-app#全局安装 npminstall-gcreate-react-app2.构建一

如何使用react开发项目

如何使用react开发项目1、环境搭建开发react项目,环境搭建是第一步,react开发需要搭建nodejs环境,因为使用官方的脚手架搭建项目最为简单,而脚手架和webpack依赖于nodejs。w

如何使用react native

如何使用reactnative一、首先安装react-native-cli脚手架工具npminstall-greact-native-cli二、使用react-native-cli创建一个初始化的工程

react如何使用css?

react如何使用css?在react中使用css有以下几种方法一、全局使用app.jsimportReactfrom'react'; importRouterfrom"./router" impor

分享一款支持多种短信服务商 Hyperf 组件,基于 overtrue/easy-sms 组件改造

一款支持多种短信服务商Hyperf组件1.新增配置文件phpbin/hyperf.phpvendor:publishhyperf-libraries/sms2.修改配置

如何引入react组件库

如何引入react组件库1、通过npm安装antd推荐(Node.js教程)antd是基于AntDesign设计体系的ReactUI组件库,主要用于研发企业级中后台产品。npminstall-Dant

如何写react组件

如何写react组件组件作为React的核心内容,是View的重要组成部分,每一个View页面都由一个或多个组件构成,可以说组件是React应用程序的基石元素。React支持三种方式来定义组件●函数式

如何将样式加入到react组件上

如何将样式加入到react组件上一、使用行内样式想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现://注意这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号 H

如何开发react组件库

如何开发react组件库技术栈:React+Webpack+TypeScript+Docz先上脚手架目录结构docz:docz文档生成器的配置目录example:demo目录lib:打包后生成文件目录

如何封装一个react组件

如何封装一个react组件1、对于reactscript,官方建议我们用JSX(javascriptxml)语法糖,需要引入额外的解析文件去解析。2、render方法:用于给dom元素插入渲染类dom

开源React Native组件库beeshell 2.0发布

2018年,我们开源了ReactNative组件库——beeshell1.0。时隔一年,我们对ReactNative组件库继续优化,实现beeshell2.0升级,开源38个功能。希望更好的服务社区,

怎么封装react组件

怎么封装react组件1、封装自己的组件使用es6的扩展类的方式,在基类中扩展组件。importReact,{Component}from'react'; classClickCounterexten

怎么创建react组件

怎么创建react组件创建react组件有3种方式,分别是无状态函数式组建、es5原生方式、继承React.Component(ES6形式)。一、无状态函数式组建无状态函数式组件,也就是你无法使用St