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

当我将鼠标悬停在按钮上时，它会不断闪烁，就像它正在不断触发鼠标输入和鼠标离开一样。

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

谢谢！

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

Answer 2

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

面部手掌