(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. 1.4分布式-通讯协议TCP/IP

    服务器和浏览器的通讯依靠http协议,今天就来分析一下http协议的具体内容以及https的加密过程.除了这些协议,为了增加服务器和浏览器交互的可拓展性,也出现了rest风格的请求方式,方便调用接口. ...

  2. 点评cat系列-服务器开发环境部署

    我们有三种部署方式:1. docker 部署2. 采用官方的 war 包部署. 3. 源码部署 很显然 docker 部署是最简单的, 我尝试了多次, 都在 cat docker 容器镜像的编译过程失 ...

  3. SpringBoot系列:Pojo validation

    JSR 303 规范了bean validation, Hibernate validator实现了JSR 303所有的规范, 同时也是最常用的validator 工具包. 使用 Hibernate ...

  4. 微信获取企业token流程

    1.获取服务商Accesstoken(每10分钟企业微信会推送一次,两个小时后过期) 2.根据suitid.accesstoken.第三方企业corpid.第三方企业permanentcode,得到第 ...

  5. [物理学与PDEs]第1章第6节 电磁场的标势与矢势 6.3 例 --- 电偶极辐射

    1. 偶极子: 相距为 $l$, 带电量分别为 $\pm q$ 的一对电荷组成的系统. 称 $$\bex {\bf m}=q{\bf l} \eex$$ 为电偶极矩, 其中 ${\bf l}$ 为 $ ...

  6. [译]Ocelot - Request Id / Correlation Id

    原文 Ocelot可以通过header的形式发送一个requestid.ocelot会将这个requestid转发到下游服务. 如果在日志配置中设置了IncludeScopes为true,那么requ ...

  7. 终止ajax异步请求——abort()

    var xhr=$.ajax(); xhr.abort();//在终止之前要确定xhr不为空

  8. nnet3 TDNN chunk, left-context, right-context

    chunk-width 数据块的宽度 NnetIo name=="input" indexes,left-context+num-frame+right-context=5+7+6 ...

  9. JS中some(),every(),forEach(),map(),filter()区别

    JS在1.6中为Array新增了几个方法map(),filter(),some(),every(),forEach(),也就是一共有这么多方法了. 刚开始接触这些倒也记得不是很清楚,在此纪录一下以加深 ...

  10. word20161227客厅家电

    1.Applicances 厨房.清洁用家电 2.Electronics 电视.音箱类家电 3.White goods 七八十年代家电基本都是白色的,所以流行叫白色家电,至今沿用 4.sleek an ...