(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. CMDB资产管理系统开发【day26】:admin action

    本节目标 审核写到数据库,我就单独写一个如下的 页面 单机go后就跳转到如下图界面,我们这节课的目标就是写一个这样的页面 asset\admin.py部分代码 注释如下: class NewAsset ...

  2. pip换源安装

    pip install --index-url https://pypi.tuna.tsinghua.edu.cn/simple 要安装的 有些工具安装太慢, 换源安装一下, 速度一下子飞起

  3. Richard Sabey于2004年给出了由123456789各出现一次的e的估计

  4. 通信协议:HTTP、TCP、UDP

    TCP   HTTP   UDP: 都是通信协议,也就是通信时所遵守的规则,只有双方按照这个规则“说话”,对方才能理解或为之服务. TCP   HTTP   UDP三者的关系: TCP/IP是个协议组 ...

  5. luogu P5286 [HNOI2019]鱼

    传送门 这题真的牛皮,还好考场没去刚( 这题口胡起来真的简单 首先枚举D点,然后对其他所有点按极角排序,同时记录到D的距离.然后按照极角序枚举A,那么鱼尾的两个点的极角范围就是A关于D对称的那个向量, ...

  6. day14 带参装饰器、迭代器、生成器

    """ 今日内容: 1.带参装饰器及warps 2.迭代器 3.生成器 """ """ # 一.带参装饰器及w ...

  7. 【原创】Java基础之Session机制

    Session机制 JSESSIONID是Session的标识,当客户端请求服务器端的时候,服务器端会检查是否已经给这个客户端创建过Session,也就是看客户端的请求中的header是否有Cooki ...

  8. java入门写的第一个代码《HelloWorld》

    public class HelloWorld {public static void main(String[] args){System.out.println("HelloWorld! ...

  9. web开篇

    一.内容回顾 1.python基础 2.网络编程 3.并发编程 4.前端 5.数据库(MySQL) 二.今日概要 1.了解Web应用程序的本质 2.Django简介及安装使用 三.今日详细 1.最简单 ...

  10. 金蝶k/3 K3云之家消息查询发送是否成功SQL语句

    金蝶k/3 K3云之家消息查询发送是否成功SQL语句 1是成功,0是还在轮询中未发送,4是发送失败 select * into #tempUserID from ( union select t_Gr ...