(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 精要面试题讲解(二) 组件间通信详解

    单向数据流与组件间通信 上文我们已经讲述过,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. Linux grep \t Tab 键失效

    解决方法 1.'$' 有一个日志文件, 比如说有两列, 中间使用 \t制表符分割了.   则在grep查找的时候 使用: '$'\t''\+  代替我们的\t制表符 - 2.-P grep -P '\ ...

  2. 金融量化分析【day111】:Matplotib简介

    一.Matplotib-绘图和可视化简介 Matplotib是一个强大的Python绘图和数据可视化的工具包 1.安装方法 pip install matplotlib 2.引用方法 import m ...

  3. gdb core 调试多线程

    ref :http://blog.sina.com.cn/s/blog_62dc94eb0100flyn.html 如果目标进程已经core dump了,那么 gdb -c core xxx   xx ...

  4. DirectX11 With Windows SDK--20 硬件实例化与视锥体裁剪

    前言 这一章将了解如何在DirectX 11利用硬件实例化技术高效地绘制重复的物体,以及使用视锥体裁剪技术提前将位于视锥体外的物体进行排除. 在此之前需要额外了解的章节如下: 章节回顾 18 使用Di ...

  5. [物理学与PDEs]第1章第2节 预备知识 2.3 Faraday 电磁感应定律

    1.  Faraday 电磁感应定律: 设 $l$ 为任一闭曲线, 则 $$\bex \oint_l{\bf E}\cdot\rd {\bf l} =-\int_S \cfrac{\p {\bf B} ...

  6. 第30月第3天 iOS图标icon自动生成和自定义尺寸

    1. http://icon.wuruihong.com/ https://www.jianshu.com/p/684751c14735 2.status bar UIViewControllerBa ...

  7. Django组件-分页器

    Django的分页器(paginator) view from django.shortcuts import render,HttpResponse # Create your views here ...

  8. yum安装软件报错Segmentation fault处理

    yum安装软件报错Segmentation fault处理 在使用yum 更新软件时提示:Segmentation fault 中文错误提示: 段错误 [root@CMS-BAK:/usr/local ...

  9. 【原创】大叔经验分享(8)创建hive表时用内部表还是外部表

    内部表和外部表最主要的一个差别就是删除表或者删除分区时,底层的文件是否自动删除,内部表会自动删除,外部表不会自动删除,所以基础数据表一定要用外部表,即使误删表或分区之后,还可以很容易的恢复回来. 虽然 ...

  10. [转载]解决在win10中webstrom无法使用命令行(Terminal)

    转载地址:https://qiaolevip.iteye.com/blog/2217688 原因:计算机从win7更新到win10,webstorm9命令框无法输入,以为是webstorm问题和win ...