React(七)独立组件间的共享Mixins

时间:2022-11-03 13:50:22

(1)ES6的使用 (https://github.com/brigand/react-mixin

  下载依赖包

npm i react-mixin --save

(2)导入react-mixin包

import ReactMixin from 'react-mixin'

(3)创建js文件 MixinLog.js

const MixinLog = {
log(){
console.log('111')
}
}; export default MixinLog;

(4)使用MixinLog

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ReactMixin from 'react-mixin';
import MixinLog from './components/MixinLog'; class App extends Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
  handle() {
Mixin.log();
}
  render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p>{this.state.date.toLocaleTimeString()}</p>
</div>
);
}
} ReactMixin(App.prototype, MixinLog)

React(七)独立组件间的共享Mixins的更多相关文章

  1. React独立组件间通信联动

    React是现在主流的高效的前端框架,其官方文档 http://reactjs.cn/react/docs/getting-started.html 在介绍组件间通信时只给出了父子组件间通信的方法,而 ...

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

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

  3. React数据流和组件间的沟通总结

    今天来给大家总结下React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数 ...

  4. React数据流和组件间的通信总结

    今天来给大家总结下React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数 ...

  5. React和Vue组件间数据传递demo

    一.React (一)父组件向子组件传数据 简单的向下传递参数 /* Parent */ class App extends Component { render() { return ( <d ...

  6. 五、react中父子组件间如何传值

    1.父组件向子组件传递数据:父组件绑定属性值传给子组件,子组件通过this.props()接受. 2.子组件向父组件传递数据:子组件绑定一个方法,方法中通过this.props.父组件方法名(参数)传 ...

  7. React 精要面试题讲解&lpar;二&rpar; 组件间通信详解

    单向数据流与组件间通信 上文我们已经讲述过,react 单向数据流的原理和简单模拟实现.结合上文中的代码,我们来进行这节面试题的讲解: react中的组件间通信. 那么,首先我们把看上文中的原生js代 ...

  8. React中组件间通信的方式

    React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...

  9. react组件间的传值方法

    关于react的几个网站: http://react.css88.com/ 小书:http://huziketang.mangojuice.top/books/react/ http://www.re ...

随机推荐

  1. 220 DIV2 B&period; Inna and Nine

    220 DIV2 B. Inna and Nine input 369727 output 2 input 123456789987654321 output 1 题意:比如例子1:369727--& ...

  2. 使用PHP抓取网站ico图标

    网站许久没用更新,以后会经常更新,本次分享一个使用PHP抓取网站ico的程序,提供一个网站列表后对网站的ico进行下载抓取,具体代码如下: <?php /** * 更新热站ico * gao 2 ...

  3. Linux中统计某个文件夹的大小

    进入这个文件夹内 然后du -sh命令

  4. DOM中的NodeList与HTMLCollection

    最近在看<Javascript高级程序设计>的时候,看到了这样一句话:“理解NodeList和HTMLCollection,是从整体上透彻理解DOM的关键所在.”,所以觉得应该写一篇关于N ...

  5. &lpar;转&rpar;sql server 2008 不允许保存更改,您所做的更改要求删除并重新创建以下表 的解决办法

    启动SQL Server 2008 Management Studio 工具菜单----选项----Designers(设计器)----阻止保存要求重新创建表的更改  取消勾选即可.

  6. 如何制作windows服务安装包

    以下转自:http://blog.csdn.net/chainan1988/article/details/7087006 Window服务的安装有两个方式: 一.命令安装          通过命令 ...

  7. 链表插入和删除,判断链表是否为空,求链表长度算法的,链表排序算法演示——C语言描述

    关于数据结构等的学习,以及学习算法的感想感悟,听了郝斌老师的数据结构课程,其中他也提到了学习数据结构的或者算法的一些个人见解,我觉的很好,对我的帮助也是很大,算法本就是令人头疼的问题,因为自己并没有学 ...

  8. js混淆代码还原-js反混淆:利用js进行赋值实现

    js混淆代码还原-js反混淆:利用js进行赋值实现   [不想用工具的直接看方法二] 本文地址:http://www.cnblogs.com/vnii/archive/2011/12/14/22875 ...

  9. JSP 介绍

    Servlet进行逻辑处理效率高,但是页面响应效率低,不太方便. 问题: 在学习了Servlet之后,使用Servlet进行页面的展现,代码书写过于麻烦. 极大的影响了开发的效率,那么有没有一种方式可 ...

  10. Linux 基础教程 32-解压缩命令

        将文件压缩后对提升数据传输效率,降低传输带宽,管理备份数据都有非常重要的功能,因此文件压缩解压技能就成为必备技能.相对于Windows中的文件解压缩工具百花争艳,在Linux中的解压缩工具则要 ...