具有嵌套反应组件的onMouse事件

class Hello extends React.Component {
  render() {
    return <div>
             <Hover name={'Outer Component Hover'}>
               <Hover  name={'Inner Component Hover'}/>
             </Hover>
           </div>;
  }
}

class Hover extends React.Component {
constructor(props) {
    super(props);
    this.state = { draggable: false };
  }

  mouseEnter = () => {
    this.setState({ draggable: true });
  }
  mouseLeave = () => {
    this.setState({ draggable: false });
  }
  render() {
    var cls = this.state.draggable ? 'over' :'none';
  
    return (
    <div className={cls} onMouseEnter={this.mouseEnter} onMouseOut={this.mouseLeave}>
    {this.props.name}
    {this.props.children}
    </div>
    )
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

.over {
  border-width: 2px;
  border-style: solid;
  border-color: red;
  cursor: move;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>