在 hover 上反應 Antd 按鈕在懸停時閃爍

Question

當我像這樣使用 antd 創建按鈕時：

import React from 'react';
import { Button } from 'antd';

 export default class Component extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  };
      }

      render () {
          return (
              <Button>Test</Button>
          )
      }

 }

一切正常。

但是，如果我制作如下按鈕：

    import React from 'react';
    import { Button } from 'antd';

     export default class Component extends React.Component {
        constructor(props) {
            super(props);
            this.state = {  };
          }

          render () {

            const TestButton = (props) => {
                  return (
                       <Button>{props.label}</Button>
                       )
                   }

              return (
                  <TestButton label="Test" />
              )
          }

     }

當我在按鈕上輸入 hover 時，它會不斷閃爍，就像不斷觸發 onMouseEnter 和 onMouseLeave 一樣。

不確定是否有辦法解決這個問題，但非常感謝任何幫助！！

謝謝！

Answer 1

在渲染 function 之外實例化按鈕。通過在渲染 function 內部創建按鈕變量，它會在每個渲染上創建一個新的按鈕實例，而不是渲染同一個按鈕。

import React from 'react';
import { Button } from 'antd';

export default class Component extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  };
      }

    const TestButton = (props) => {
        return (
            <Button>{props.label}</Button>
        )
    }

    render () {
        return (
            <TestButton label="Test" />
        )
    }

 }

Answer 2

不幸的是，它就像將 extends React.Component 更改為 PureComponent 一樣簡單。

面掌