与React中的大多数内容一样，您需要一个状态，例如：

constructor() {
  super();
  this.state = {isHovered: false};
}

当用户将鼠标悬停在图标上或图标外时，此状态需要更改：

toggleHover() {
  this.setState(prevState => ({isHovered: !prevState.isHovered}));
}

<div className='icon' onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>

然后，根据该状态确定应显示 * 什么 * 的逻辑：

{this.state.isHovered ?
  <p> Lorem ipsum </p> :
  <i className="fa fa-fw fa-globe" style={{ fontSize: '1.75em' }} />
}

您可能希望有两个单独的方法，一个用于onMouseEnter，另一个用于onMouseLeave，而不是像我一样，两个都使用一个共享方法。
哦，你还有个打字错误：您在一些地方写的是class而不是className。

演示

class App extends React.Component {
  constructor() {
    super();
    this.state = {isHovered: false};
    this.toggleHover = this.toggleHover.bind(this);
  }
  
  toggleHover() {
    this.setState(prevState => ({isHovered: !prevState.isHovered}));
  }

  render() {
    return (
      <div className='wrapper'>
        <div className='icon' onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>
          {this.state.isHovered ?
            <p> Lorem ipsum </p> :
            <i className="fa fa-fw fa-globe" style={{ fontSize: '1.75em' }} />
          }
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

.icon i {
  display: block;
  width: 32px;
  height: 32px;
  background: url('https://via.placeholder.com/32x32');
}

<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="app"></div>

除了@Chris的回答，如果你不想创建一个事件处理程序，那么你可以创建一个内联箭头函数来完成这项工作。

onMouseEnter={()=> this.setState({isHovered: true})}

onMouseLeave={()=> this.setState({isHovered: false})}

这只是你可以使用的一种简写。

您需要将state与onMouseEnter和onMouseLeave事件一起使用

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isHover: false
        };

        this.onMouseEnterHandler = this.onMouseEnterHandler.bind(this);
        this.onMouseLeaveHandler = this.onMouseLeaveHandler.bind(this);
    }

    onMouseEnterHandler() {
        this.setState({
            isHover: true
        });
    }

    onMouseLeaveHandler() {
        this.setState({
            isHover: false
        });
    }

    render() {
        return (
            <div className="app">
                <div className="icon" onMouseEnter={this.onMouseEnterHandler} onMouseLeave={this.onMouseLeaveHandler}>
                    {
                        this.state.isHover
                            ? <div>hovered</div>
                            : <div>some text</div>
                    }
                </div>
            </div>
        );
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById('app')
);

<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="app"></div>

这对我很有效：

function MyComponent() {
   const [myText, setMyText] = useState("Initial Text");
       
   return (
       <div
           onMouseEnter={() => setMyText('New Text')}
           onMouseLeave={() => setMyText('Whatever')}
        >
            {myText}
       </div>
   )
}