封装鼠标hover组件hover

import React, { Component } from 'react';
import PropTypes from "prop-types";

class MouseChangeStyleWrap extends Component {
  static propTypes = {
    children: PropTypes.any,
    mouseOverStyle: PropTypes.object,
    mouseOutStyle: PropTypes.object,
    mouseOverClass: PropTypes.string,
    mouseOutClass: PropTypes.string,
  }
  constructor(props) {
    super(props);
    this.state = {
      mouseOver: false
    };
  }
  handleMouseOver = () => {
    this.setState({
      mouseOver: true
    });
  }
  handleMouseOut = () => {
    this.setState({
      mouseOver: false
    });
  }
  render() {
    const { mouseOutStyle, mouseOverStyle, mouseOverClass, mouseOutClass } = this.props;
    const { mouseOver } = this.state;
    return (
      <span onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} style={mouseOver ? mouseOverStyle :  mouseOutStyle} className={mouseOver ? mouseOverClass : mouseOutClass }>
        {this.props.children}
      </span>
    );
  }
}


class App extends Component {
  render() {
    return (
      <MouseChangeStyleWrap mouseOverStyle={{color: "red"}} mouseOutStyle={{color: "blue"}}>
        鼠标悬浮红色，离开蓝色
      </MouseChangeStyleWrap>
    );
  }
}

ReactDOM.render(
  <App />
, mountNode)

import React, { Component } from 'react';
import PropTypes from "prop-types";

class MouseChangeStyleWrap extends Component {
  static propTypes = {
    children: PropTypes.any,
    mouseOverStyle: PropTypes.object,
    mouseOutStyle: PropTypes.object,
    mouseOverClass: PropTypes.string,
    mouseOutClass: PropTypes.string,
  }
  constructor(props) {
    super(props);
    this.state = {
      mouseOver: false
    };
  }
  handleMouseOver = () => {
    this.setState({
      mouseOver: true
    });
  }
  handleMouseOut = () => {
    this.setState({
      mouseOver: false
    });
  }
  render() {
    const { mouseOutStyle, mouseOverStyle, mouseOverClass, mouseOutClass } = this.props;
    const { mouseOver } = this.state;
    return (
      <span onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} style={mouseOver ? mouseOverStyle :  mouseOutStyle} className={mouseOver ? mouseOverClass : mouseOutClass }>
        {this.props.children}
      </span>
    );
  }
}


const colors = [{
  mouseOver: "black",
  mouseOut: "red",
},{
  mouseOver: "pink",
  mouseOut: "orange",
},{
  mouseOver: "yellow",
  mouseOut: "green",
},{
  mouseOver: "blue",
  mouseOut: "purple",
}]

class App extends Component {
  renderMaps = () => {
    return colors.map((i, index) => {
      return (
        <div key={index}>
          <MouseChangeStyleWrap mouseOverStyle={{color: i.mouseOver}} mouseOutStyle={{color: i.mouseOut}}>
            鼠标悬浮{i.mouseOver}，离开{i.mouseOut}
          </MouseChangeStyleWrap>
        </div>
      )
    })
  }
  render() {
    return (
      <div>
        {this.renderMaps()}
      </div>
    );
  }
}

ReactDOM.render(
  <App />
, mountNode)

import React, { Component } from 'react';
import PropTypes from "prop-types";

const styles = {
  text: {
    width: "100%",
    height: 500,
    background: "white",
    padding: "100px 0",
    margin: "0 auto",
    border: "1px solid #ddd",
    perspective: "500px",
  },
  banner: {
    height: 300,
    width: 400,
    margin: "0 auto",
    background:  "#37D7B2",
    transition: "transform 0.1s",
    boxShadow: "0 0 15px rgba(0,0,0,0.25)",
    textAlign: "center",
    lineHeight: "300px",
    fontSize: 50,
    color: "#fff",
  }
}

class Mouse3DHover extends Component {
  static propTypes = {
    children: PropTypes.any,
    contentStyles: PropTypes.object,
    wrapStyles: PropTypes.object,
  }
  constructor(props) {
    super(props);
    this.state = {
      transform: "",
    };
  }

  handleMouseMove = (e) => {
    const textDom = this.text;


    const rect = textDom.getClientRects()[0];
    let x = e.pageX - rect.left - window.scrollX;
    let y = e.pageY - rect.top - window.scrollY;

    let centerX = textDom.offsetWidth / 2;
    let centerY = textDom.offsetHeight / 2;

    let deltaX = x - centerX;
    let deltaY = y - centerY;

    let percentX = deltaX / centerX
    let percentY = deltaY / centerY

    let deg = 10

    this.setState({
      transform: `rotateX(${ deg*-percentY }deg) rotateY(${ deg*percentX }deg)`,
    });
  }

  handleMouseLeave = () => {
    this.setState({
      transform: ""
    });
  }

  render() {
    return (
      <div id="test" ref={ref => this.text=ref} onMouseMove={this.handleMouseMove} style={{ ...styles.text, ...styles.wrapStyles }} onMouseLeave={this.handleMouseLeave} >
        <div style={{...styles.banner, ...this.props.contentStyles, transform: this.state.transform}}>{this.props.children}</div>
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <Mouse3DHover >
        这个是3Dhover
      </Mouse3DHover>
    );
  }
}

ReactDOM.render(
  <App />
, mountNode)