<react> 组件的详细介绍:

思维导图:

代码介绍:

TodoList:(组件)

 import React, { Component } from 'react'
import Style from './style.css' export default class index extends Component {
render() {
return (
<div>
<h2>TodoList</h2>
m
</div>
)
}
}

Todoinput :(组件)

 import React, { Component } from 'react'
import Style from './style.css' export default class index extends Component {
render() {
return (
<div>
<h2>Todoinput</h2> </div>
)
}
}

Header:(组件)

 import React, { Component } from 'react'
import Title from './Title'
import Style from './style.css'
export default class index extends Component {
render() {
return (
<div>
<h2>Header</h2>
<Title/>
</div>
)
}
}

Title:(组件)

 import React, { Component } from 'react'

 export default class Title extends Component {
render() {
return (
<div>
<h3>Title</h3>
</div>
)
}
}

Component 里面的index.js :(抛出去)

 // import TodoList from './TodoList'
// import Header from './Header'
// import Todoinput from './Todoinput
// export{
// TodoList,
// Header,
// Todoinput
// }
-------------------------------------------------
export {default as TodoList} from './TodoList'
export {default as Header} from './Header'
export {default as Todoinput} from './Todoinput'
-------------------------------------------------------
两种方法都可以
(把Component 里面的组件全部抛出去)

App.js:(组件)

 /* eslint-disable no-unused-vars */
import React, { Component,Fragment } from 'react'
import{
TodoList,
Header,
}from './Component'
import Title from './Component/Header/Title'; export default class App extends Component {
render() {
return (
<Fragment >
<TodoList/>
<Header/>
<Todoinput/>
</Fragment >
// {/* // <> */}
// {/* // </> */}
)
}
}

index.js:(组件)

 import React from "react";
import ReactDOM from "react-dom";
import App from './App' ReactDOM.render(<App />, document.getElementById("root"));

<react> 组件的详细介绍:的更多相关文章

  1. React 组件间通信介绍

    React 组件间通信方式简介 React 组件间通信主要分为以下四种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面对这四种情况分别进行介绍:   父组件向子 ...

  2. 3. React 组件生命周期介绍

            React 中的每个组件都有三个阶段,这三个阶段构成了组件完整的生命周期.组件的生命周期为]); return; } this.setState({name: event.target ...

  3. 日志记录组件[Log4net]详细介绍

    转载:http://www.cnblogs.com/liwei6797/archive/2007/04/27/729679.html 因为工作中有要用到Log记录,找到一篇不错的文章,就转了过来. 一 ...

  4. React组件详细介绍及其生命周期函数

    组件的详细说明 通过Reac.createClass({...})创建组件的时候,应该有一个render()方法,也可以在其中添加生命周期函数. render方法 当调用该方法的时候,会检测this. ...

  5. 150多个Flutter组件详细介绍送给你

    迷茫是什么,迷茫就是大事干不了,小事不想干,能力配不上欲望,才华配不上梦想. 150+Flutter组件详细介绍地址:http://laomengit.com/ 前言 我在Flutter未正式发布之前 ...

  6. React Native之本地文件系统访问组件react-native-fs的介绍与使用

    React Native之本地文件系统访问组件react-native-fs的介绍与使用 一,需求分析 1,需要将图片保存到本地相册: 2,需要创建文件,并对其进行读写 删除操作. 二,简单介绍 re ...

  7. react组件什么周期记录,转的

    react 的核心除了虚拟DOM,我想还有一个很重要的就是生命周期函数,理解生命周期函数,对写出合理的commponet很有帮助.下面总结一下我对生命周期函数的一些理解已经在项目过程中遇到的一些问题. ...

  8. React组件和生命周期简介

        React 简介----React 是 Facebook 出品的一套颠覆式的前端开发类库.为什么说它是颠覆式的呢? 内存维护虚拟 DOM 对于传统的 DOM 维护,我们的步骤可能是:1.初始化 ...

  9. vue对比其他框架详细介绍

    vue对比其他框架详细介绍 对比其他框架 — Vue.jshttps://cn.vuejs.org/v2/guide/comparison.html React React 和 Vue 有许多相似之处 ...

随机推荐

  1. Android_存储之SharedPreferences

    一.概述 SharedPreferences是一种轻量级的数据存储方式,采用键值对的存储方式. SharedPreferences只能存储少量数据,大量数据不能使用该方式存储,支持存储的数据类型有bo ...

  2. eatwhatApp开发实战(二)

    上期,我们做了个小app“eatwhat”,接下来每期都会为其添加新的功能.本期,我们为店铺增加添加店铺的功能. 还是先设置个布局: <RelativeLayout android:layout ...

  3. Burpsuite代理socks流量

    一 设置sock代理 二 设置浏览器代理 三 设置burpsuite代理 四 浏览器访问验证 总结:增加取证难度,隐藏你自己ip,别光着屁股跑了O-O!

  4. 02 . Prometheus告警处理

    Prometheus告警简介 告警能力在Prometheus的架构中被划分成两个独立的部分.如下所示,通过在Prometheus中定义AlertRule(告警规则),Prometheus会周期性的对告 ...

  5. ajax实现注册并选择头像后上传

    在初次接触ajax后,我们做了一个crm训练的项目,大多数小组都有注册用户这一项,但是都忽略掉了一个功能,那就是,很多网站的注册是可以上传头像的,在这里我做了一个在已有的头像数组里选择图片上传作头像的 ...

  6. css引入方式和基本样式

    css的三种引入方式: 1.内嵌:直接在标签中添加style属性 格式:<标签名 style="样式1:样式值1:样式2=样式值2:"></标签名> 2.内 ...

  7. 分布式事务专题笔记(三)分布式事务解决方案之TCC(三阶段提交)

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 1.什么是TCC事务 TCC是Try.Confifirm.Cancel三个词语的缩写,TCC要求每个分支 ...

  8. Spring (一 ) 概述与介绍

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 目录 1.Spring概述 2.Spring的模块介绍 Spring框架分为四大模块: 3.Eclips ...

  9. MyBatis(一) 概述与SQL定制、对象映射

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.MyBatis概述 1.mybatis简介 MyBatis 是支持定制化 SQL.存储过程以及高级映 ...

  10. Spring Cloud Ribbon 客户端负载均衡

    Ribbon客户端组件提供一系列完善的配置选项,比如连接超时.重试.重试算法等,内置可插拔.可定制的负载均衡组件.下面是用到的一些负载均衡策略: 简单轮询负载均衡 加权轮询负载均衡 区域感知轮询负载均 ...