react 组件的组合使用（组件化开发）

最新推荐文章于 2024-03-18 16:29:46 发布
最新推荐文章于 2024-03-18 16:29:46 发布
阅读量2.8k 收藏 1
点赞数
分类专栏： 前端MVVM框架—React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangjianfeng21/article/details/94180841
版权

组件化编写功能的流程

拆分组件

实现静态组件，只有静态界面，没有动态数据，也没有动态交互

实现动态组件（实现动态数据初始化显示；实现交互功能）

 

 

初始化显示

拆分组件: 拆分界面,抽取组件,实现静态组件: 使用组件实现静态页面效果

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>05_components_composing</title>
</head>
<body>

  <div id="example"></div>

  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/prop-types.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/babel">
    class App extends React.Component {
      render () {
        return (
          <div>
            <h1>Simple TODO List</h1>
            <Add />
            <List />
          </div>
        )
      }
    }

    class Add extends React.Component {
      render () {
        return (
          <div>
            <input type="text" />
            <button>add #4</button>
          </div>
        )
      }
    }

    class List extends React.Component {
      render () {
        return (
          <ul>
            <li>AAAA</li>
            <li>BBBB</li>
            <li>CCCC</li>
          </ul>
        )
      }
    }

    ReactDOM.render(<App/>, document.getElementById('example'))
  </script>
</body>
</html>

 

 

实现动态组件:动态显示初始化数据

数据保存在哪个组件，如果是这个数据只是某个组件需要用到，那么就放在该组件，如果有两个组件需要用到，那么放在他们共同的父组件里

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>05_components_composing</title>
</head>
<body>

  <div id="example"></div>

  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/prop-types.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/babel">
    // 这种情况下将数据放在App组件里面，这样两个子组件Add和List都可以使用到这个数据

    class App extends React.Component {
      constructor (props) {
        super (props)
        this.state = {
          todos: ['吃饭', '睡觉', '写代码']
        }
      }
      render () {
        return (
          <div>
            <h1>Simple TODO List</h1>
            <Add />
            <List todos={this.state.todos}/>
          </div>
        )
      }
    }

    class Add extends React.Component {
      render () {
        return (
          <div>
            <input type="text" />
            <button>add #4</button>
          </div>
        )
      }
    }

    class List extends React.Component {
      render () {
        return (
          <ul>{this.props.todos.map((todo, index) => <li key={index}>{todo}</li>)}</ul>
        )
      }
    }
    List.protoType = {
      todos: PropTypes.array.isRequired
    }


    ReactDOM.render(<App/>, document.getElementById('example'))
  </script>
</body>
</html>

 

 

交互功能

子组件改变父组件的状态（状态在哪个组件，更新状态的行为就应该定义在哪个组件，父组件定义函数，传给子组件调用）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>05_components_composing</title>
</head>
<body>

  <div id="example"></div>

  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/prop-types.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/babel">
    // 这种情况下将数据放在App组件里面，这样两个子组件Add和List都可以使用到这个数据

    class App extends React.Component {
      constructor (props) {
        super (props)
        this.state = {
          todos: ['吃饭', '睡觉', '写代码']
        }
        this.addTodo = this.addTodo.bind(this)
      }
      render () {
        const {todos} = this.state
        return (
          <div>
            <h1>Simple TODO List</h1>
            <Add count={todos.length} addTodo={this.addTodo}/>
            <List todos={todos}/>
          </div>
        )
      }
      addTodo (todo) {
        const {todos} = this.state // 先取出状态
        todos.unshift(todo)

        this.setState({todos})// 更新状态
      }
    }


    
    class Add extends React.Component {
      constructor (props) {
        super (props)
        this.add = this.add.bind(this)
      }
      render () {
        return (
          <div>
            <input type="text" ref={input => this.todoInput = input}/>
            <button onClick={this.add}>add #{this.props.count + 1}</button>
          </div>
        )
      }
      add () {
        // 1.读取输入的数据
        const todo = this.todoInput.value.trim()
        // 2.检查合法性
        if (!todo) {
          return
        }
        // 3.添加
        this.props.addTodo(todo)

        // 4.清除输入
        this.todoInput.value = ''
      }
    }
    Add.propTypes = {
      count: PropTypes.number.isRequired,
      addTodo: PropTypes.func.isRequired
    }



    class List extends React.Component {
      render () {
        return (
          <ul>
            {
              this.props.todos.map((todo, index) => {return <li key={index}>{todo}</li>})
            }
          </ul>
        )
      }
    }
    List.propTypes = {
      todos: PropTypes.array.isRequired
    }


    ReactDOM.render(<App/>, document.getElementById('example'))
  </script>
</body>
</html>

 

胡椒粉0121
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React组件以构建可组合和灵活的图表-React开发
05-27
隆隆图React组件，用于构建可组合且灵活的图表。 它基于引擎盖下的D3.js，但是大多数时候您不会感觉到。 文档所有示例都是可编辑的。 您可以看到Rumble-charts图React组件，用于构建可组合且灵活的图表以可视化您的数据。 它基于引擎盖下的D3.js，但是大多数时候您不会感觉到。 实际示例文档所有示例都是可编辑的。 您可以在页面上直接看到结果。 https://rumble-charts.github.io演示/实时编辑rosko.github.io/slides/2016-04-declarative-charts/#/liveedit安装NPM npm install --save rumble-charts用法只需包括：i
用于构建交互式数据可视化的可组合React组件的集合-React开发
05-27
赢得一个由可组合的React组件组成的生态系统，以构建交互式数据可视化。 内容入门Victory Native API文档指南贡献请参阅文档，其中包含可组合的React组件生态系统，用于构建交互式数据可视化。 Victory Contents入门...
react组件化开发
m0_74331185的博客
03-15 212
项目实战中以组件化为主进行开发。创建两个子组件（A，B）引入组件挂载。
React——组件化
最新发布
汪汪汪汪
03-18 687
类（class）组件：使用 ES6 的 class 和extend 继承React的component来创建的组件。组件化其实在每个架构当中都存在，通常我们会把独立、可复用、可组合的不错剥离出来，独立开发一个组件。依据业务、组件类型分门别类放在JS文件当中，这个依据个人习惯、业务性质进行堆放。函数组件：使用JS的。
使用babel搭建react组件库
chaogaoxiaojifantong的博客
03-03 463
一开始用的antd改装的，，感觉太大了，还是自己手敲好了 首先创建3个文件夹 然后src里的内容 再粘一下代码 ft-p1.jsx import React, { Fragment } from 'react'; import './ft-p1.css' function FtP1(props){ function handleClick(){ //props.onClick(); } return( <Fragment>
React 之 组件化开发
玄鱼殇
07-03 1583
React 之 React组件化开发
react-组件开发
软工二班秦同学的博客
10-07 138
早期的js被设计的非常简单，主要目的就为了操作DOM元素，没有想到会发展到现在这么好，以至于出现了前端工程师岗位，前端的工作也月越来越复杂，项目也越来越庞大，开发时会多人协作开发，在以前容易出现变量命名冲突问题。在后来es6出现后，得到了很大的改变，有了模块化的概念node.js当我们封装好代码后，就可以导出给外部使用，外部就可以引入导出的代码进行使用。1）在构造器中定义state内部状态2）直接在类中定义属性state = {title: 'web前端'render() {return (
react组件化开发详解
zzx262625的博客
08-14 1775
React是一个流行的JavaScript库，用于构建用户界面，并且以组件化的方式进行开发。
总结 React 组件的三种写法 及最佳实践 [涨经验]
Fair_feng的博客
06-20 490
React 专注于 view 层，组件化则是 React 的基础，也是其核心理念之一，一个完整的应用将由一个个独立的组件拼装而成。截至目前 React 已经更新到 v15.4.2，由于 ES6 的普及和不同业务场景的影响，我们会发现目前主要有三种创建 React 组件的写法：1. ES5写法React.createClass，2. ES6写法React.Component，3. 无状态的函数式写法（
React实现简单的三栏布局
hoverdisply的博客
11-16 854
### react中任何方法元素都可以以属性进行传递 标签内的元素将作为属性的children传递，因此主区域接收值为props.childer. 左右两栏原理同上。1.三栏布局要保证主数据的优先显示，因此将主元素优先渲染。三栏布局作为常用布局，在react下实现方式。rightContainer 右边区域内容。5.该组件是否有自己的状态。gerder 侧边栏之间的间距。rightWidth右边栏宽度。leftWidth左边栏宽度。二、代码实现（函数组件）主区域直接在标签内写。
【React】归纳篇（五）组件组合的使用 | 受控与非受控组件 | 组件的综合练习 | 获取表单数据
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
09-05 581
今天我们来一个小练习，最常见的TODO练习，将组件进行组合使用。 首先明确以下3点： 功能界面的组件化编码流程（重要） 1、拆分组件：例如把一个整体界面进行拆分，分为一个个单个组件 2、实现静态组件：使用组件实现静态页面效果 3、实现动态苏建：动态显示初始化数据；实现交互功能，如绑定事件监听 思考？ 数据应该保存在哪个组件内？ 分析： 1、看数据是某个组件需要，还是...
react学习 --- 第五天 react组件化开发（一）
weixin_56663198的博客
01-18 439
1 React的组件化开发 2 React组件生命周期 3 React组件间的通信 4 React组件插槽用法 5 React非父子的通信 6 setState的使用详解
：atom_symbol：React使用样式系统构建的原始UI组件。-React开发
05-27
Rebass React UI组件库和设计系统，使用样式化系统构建，并支持样式化组件和情感。 http://jxnblk.com/rebass npm i rebass Rebass是一个高度可组合的primi Rebass React原始库，该库是使用样式化系统构建的。 ...
:high_voltage:您的React应用程序的简单，模块化和可访问的UI组件-React开发
05-27
以速度创建可访问的React应用:high_voltage:Chakra UI提供了一组可访问，可重用和可组合的React组件，这些组件使创建网站和应用变得非常容易。 寻找快速构建可访问的React应用:high_voltage:Chakra UI提供了一组可...
react-composition-app:使用组合将道具传递到组件树下
03-11
可用脚本在项目目录中，可以运行：npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。npm test 在交互式监视模式下启动测试运行...
react 中使用Ajax请求（axios，Fetch）
huangjianfeng21的博客
06-29 7885
React本身只关注于界面,并不包含发送ajax请求的代码，前端应用需要通过ajax请求与后台进行交互(json数据)，可以使用集成第三方ajax库(或自己封装) 常用的ajax请求库 jQuery:比较重,如果需要另外引入不建议使用 axios:轻量级,建议使用，封装XmlHttpRequest对象的ajax，promise风格，可以用在浏览器端和node服务器端 ...
React脚手架创建一个React应用以及项目目录结构详解
huangjianfeng21的博客
06-29 4280
react脚手架 用来帮助程序员快速创建一个基于xxx库的模板项目，包含了所有需要的配置，指定好了所有的依赖，可以直接安装/编译/运行一个简单效果 react提供了一个专门用于创建react项目的脚手架库: create-react-app 项目的整体技术架构为: react + webpack + es6 + babel + eslint 使用脚手架开发的项目的特点: 模块化（js是一...
监听页面滚动条
huangjianfeng21的博客
07-19 3550
使用页面滚动条监听的场景 通常我们在开发过程中会遇到一些需求，比如：当页面向上滑动或者向下滑动时，当页面滚动条滑动到某个位置的时候，当页面滚动或者停止滚动的时候，当页面滚动到顶部或者底部的时候，需要做一些页面上的处理，那么这个时候我们就需要监控页面的滚动条 滚动条频繁触发的问题 监听页面是否在滚动 监听页面是否滚动到具体指定的某个位置（指定数值，顶部，底部） 监听滚动条的方向（向上...
react 怎么组件化开发
06-09
组件化开发是一种将应用程序分解为独立，可重用的部分的方法。以下是一些组件化开发的基本步骤： 1. 将 UI 分解为多个组件：将 UI 分解为小型、独立的组件，每个组件都有自己的状态和行为。 2. 设计组件 API：定义...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值