什么是React中的组件
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
比如在index.js这个入口文件中, import App from './App';就是一个组件,打开这个组件
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="App">
hello world
</div>
);
}
}
export default App;
import React from 'react';
class App extends React.Component {
render() {
return (
<div className="App">
hello world
</div>
);
}
}
export default App;
我们再回到index。我们知道App是一个组件,在项目中引入了这个组件,接下来我们看ReactDOM.render在做什么,ReactDOM是一个第三方的模块,他又一个方法叫做render,这个方法可以把一个组件挂载到一个节点上。这里我们把App组件挂载到id为root的一个节点上。咋一看我们没有用到React,为什么要引入呢,我们把他删除再看一下,会提示Failed to compile。编译失败,那为什么会编译失败呢。我们看下面使用App的时候,不是直接用App,而是用html标签的形式一样包裹起来。那么这种语法呢叫做jsx的语法,如果在项目中使用jsx这样的语法,那么就一定要对应的文件里引入React,不引入React是没法去编译这种jsx的语法的。那么回过头来,我App.js没有用到jsx语法,但是不引入依然会提示Failed to compile。我们看render里面的标签,<div></div>,这个不就是html标签么,实际上不是的,在React中,render函数里面这些标签其实也是jsx的语法
什么是React中的组件的更多相关文章
- React中父组件与子组件之间的数据传递和标准化的思考
React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
- React中父子组件间的通信问题
1.https://blog.csdn.net/sinat_17775997/article/details/59103173 (React中父子组件间的通信问题)
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- React中父子组件数据传递
Vue.js中父子组件数据传递:Props Down , Events Up Angular中父子组件数据传递:Props Down, Events Up React中父子组件数据传递:Prop ...
- React中父子组件传值
一.首先我们先来看父组件向子组件传值 1.1 我们要明白父组件 --> 子组件 是通过props这个属性来传值的 我们来看父组件的代码 import React from 'react'; im ...
- react中父组件给子组件传值
子组件 state = { msg: 'a' } render(){ return<h1>{this.state.msg}</h1> } setInfo = (val)=> ...
- React中嵌套组件与被嵌套组件的通信
前言 在React项目的开发中经常会遇到这样一个场景:嵌套组件与被嵌套组件的通信. 比如Tab组件啊,或者下拉框组件. 场景 这里应用一个最简单的Tab组件来呈现这个场景. import React, ...
- react中创建组件
第1种 - 创建组件的方式 > 使用构造函数来创建组件,如果要接收外界传递的数据,需要在 构造函数的参数列表中使用`props`来接收:> 必须要向外return一个合法的JSX创建的虚拟 ...
- react中父组件调用子组件的方法
1.直接使用ref进行获取 import React, {Component} from 'react'; export default class Parent extends Component ...
随机推荐
- Google Authenticator(谷歌身份验证器)
<!DOCTYPE html>Google Authenticator(谷歌身份验证器) ] Google Authenticator(谷歌身份验证器) Google Authentica ...
- Bootstrap 斜体、文本对齐、缩略图、地址、列表等
目录1.标题2.页面主体3.强调 a.小号文本 b.着重 c.斜体 d.对齐class e.强调class4.缩略语5.地址6.列表 a.无序列表 b.有序列 ...
- 下载Dubbo源码后的编译安装启动
1:安装jdk,maven 配制环境变量: 2:安装zookeeper 配制zookeeper环境变量 3:把dubbo源码编译成war包 启动cmd黑窗口 ,进入 源码文件 ...
- jQuery对新添加的控件添加响应事件
1. 通过id和类控制 <html> <head> <script src="jquery.js"></script> <sc ...
- React.js 小书 Lesson8 - 组件的组合、嵌套和组件树
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson8 转载请注明出处,保留原文链接和作者信息. 继续拓展前面的例子,现在我们已经有了 Heade ...
- Windows 那些坑
Windows Qt搭建 安装Qt 选择MinGW或者MSVC(建议VC), qt自动检测编译器, 基本上不用配置 去掉UWP(Windows通用平台开始, 不同于传统的exe, 它可以运行在所有的W ...
- nyoj1032——Save Princess——————【set应用】
Save Princess 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 Yesterday, the princess was kidnapped by a de ...
- socket 客户端和服务端通信
客户端要连接服务器:首先要知道服务器的IP地址.而服务器里有很多的应用程序,每一个应用程序对应一个端口号 所以客户端想要与服务器中的某个应用程序进行通信就必须要知道那个应用程序的所在服务器的IP地址, ...
- Starting MySQL. ERROR! The server quit without updating PID file如何解决
今天数据库突然挂了.重启提示: Starting MySQL. ERROR! The server quit without updating PID file (/usr/local/mysql/v ...
- Git连接远程服务器输入密码问题
当遇到使用Git从远程pull 或者 push代码的时候提示输入密码的时候,毫无疑问SSH Key出问题了! 一.如果只是使用Git Bash,重新生成一下ssh,把新的id_rsa.pub添加到Gi ...