React Antd Button Flickering onHover on hover答案

【问题标题】：React Antd Button Flickering onHover on hoverReact Antd Button Flickering onHover on hover
【发布时间】：2020-09-01 13:50:41
【问题描述】：

当我像这样使用 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" />
              )
          }

     }

当我将鼠标悬停在按钮上时，它会不断闪烁，就像 onMouseEnter 和 onMouseLeave 不断触发一样。

不确定是否有办法解决这个问题，但非常感谢任何帮助！

谢谢！

【问题讨论】：

你能做一个codesandbox还是一个jsfiddle，这样更容易浏览你的代码。此外，问题可能出在您的 Button 组件中，即您从 antd 导入的组件
感谢您的帮助！我尝试使用默认的

标签： javascript reactjs antd

【解决方案1】：

在渲染函数之外实例化您的按钮。通过在渲染函数中创建按钮变量，它会在每次渲染时创建一个按钮的新实例，而不是渲染同一个按钮。

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" />
        )
    }

 }

【讨论】：

【解决方案2】：

不幸的是，它就像将 extends React.Component 更改为 PureComponent 一样简单。

掌心

【讨论】：