React（七）独立组件间的共享Mixins

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 84 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yulingjia/p/9722623.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何在React项目中使用ES6语法及React Mixin，通过具体步骤展示了下载依赖、创建并使用自定义Mixin的过程，适用于希望增强组件功能的开发者。

（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)

转载于:https://www.cnblogs.com/yulingjia/p/9722623.html