如果我理解正确，您正在尝试创建一个全新的按钮。为什么不像@André Pena 建议的那样更改按钮的标签/样式？

下面是一个例子：

var HoverButton = React.createClass({
    getInitialState: function () {
        return {hover: false};
    },

    mouseOver: function () {
        this.setState({hover: true});
    },

    mouseOut: function () {
        this.setState({hover: false});
    },

    render: function() {
        var label = "foo";
        if (this.state.hover) {
            label = "bar";
        }
        return React.createElement(
            "button",
            {onMouseOver: this.mouseOver, onMouseOut: this.mouseOut},
            label
        );
    }
});

React.render(React.createElement(HoverButton, null), document.body);

现场演示：http : //jsfiddle.net/rz2t224t/2/

您可能应该为此只使用 CSS，但如果您坚持在 JS 中执行此操作，您只需在 onMouseEnter 中将 state 中的标志设置为 true，并在 onMouseLeave 中将相同的标志设置为 false。在渲染中，如果标志为真，则渲染另一个按钮。

没有什么花哨或复杂的事情。

我不确定您何时只在第二个按钮悬停时才显示第一个按钮（上图）。如果鼠标悬停从第二个按钮上移除，第一个按钮将再次消失。但我想问题是要展示它并使其可交互。

在 React 中，您将为此使用状态。在函数式 React 组件中，useState钩子是最好的选择。该onMouseOver按钮事件通过调用改变悬停状态变量setShowButtons函数。我通常根据变量（showButtons在本例中）切换 CSS 类，但在本例中也可以使用条件渲染作为按钮 #3。

仅使用 CSS 也可以在按钮 #2 悬停时显示上面的按钮 #1。在这个带有 flex-box（颠倒两个按钮的顺序）和同级选择器 (~) 的示例中。

const App = () => {
  const [showButtons, setShowButtons] = React.useState(false);
  return (
    <main className="main-container">
      <h4>Show buttons with React state</h4>
      <button className={showButtons ? "button" : "button _hide"}>
        #1. I'm shown with a CSS transition when #2 is hovered
      </button>
      <button
        className="button"
        onMouseOver={() => setShowButtons(true)}
        onFocus={() => setShowButtons(true)}
        onMouseOut={() => setShowButtons(false)}
        onBlur={() => setShowButtons(true)}
      >
        #2. Hover me to show #1 and #3 button
      </button>
      {showButtons && (
        <button className="button">
           #3. I'm rendered when #2 is on hovered
        </button>
      )}
      <hr />
      <h4>Show button with CSS only</h4>
      <div className="reversed-container">
        <button className="button-2">#2. Hover me to show button #1</button>
        <button className="button-2 _hide">
          #1. I'm shown with a CSS transition when #2 is hovered
        </button>
      </div>
    </main>
  );
};

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

.main-container {
  display: flex;
  flex-direction: column;
}

.reversed-container {
  display: flex;
  flex-direction: column-reverse;
}

hr {
  width: 100%;
  margin-top: 1rem;
}

.button,
.button-2 {
  padding: 1rem;
  transition: opacity 1s;
}

.button._hide,
.button-2._hide {
  opacity: 0;
  pointer-events: none;
}


.button:hover,
.button-2:hover {
  opacity: 1;
  pointer-events: initial;
  background-color: lightyellow;
}

.button-2:hover ~ .button-2._hide {
  opacity: 1;
  pointer-events: initial;
  background-color: lightyellow;
}

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

<div id="root"></div>

我刚刚阅读了一些关于 react.js 的教程，我找到了这个解决方案。

为了可重用性，并分离出“悬停”逻辑，您可以创建一个组件来替换您的普通标签。

像这样的东西：

var React = require('react');
var classNames = require('classnames');
var HoverHandlers = require('./HoverHandlers.jsx');

var ElementHover = React.createClass({
  mixins: [HoverHandlers],

  getInitialState: function () {
    return { hover: false };
  },

  render: function () {
    var hoverClass = this.state.hover ? this.props.hoverClass : '';
    var allClass = classNames(this.props.initialClasses, hoverClass);

    return (
      <this.props.tagName 
                          className={allClass} 
                          onMouseOver={this.mouseOver} 
                          onMouseOut={this.mouseOut}>
        {this.props.children}
      </this.props.tagName>
    );
  }

});

module.exports = ElementHover;

该HoverHandlers混入像（你也可以添加处理程序：活跃：焦点等）：

var React = require('react');

var HoverHandlers = {
  mouseOver: function (e) {
    this.setState({ hover: true });
  },
  mouseOut: function (e) {
    this.setState({ hover: false });
  },
};  
module.exports = HoverHandlers;

然后，您可以像这样使用该组件：

<ElementHover tagName="button" hoverClass="hover" initialClasses="btn btn-default" >
          Label or content of the button
</ElementHover>

代码可能需要优化。所以，非常感谢任何人可以帮助我。