React: Chrome React工具将组件标记为无状态组件

Question

我安装了chrome react开发人员工具，我已经使用了几天了。通过chrome React工具可以很方便地看到React组件的名称。我一直想知道为什么我的一些组件，chrome开发人员工具转换组件的名称为"StatelessComponent"。如果在那里有真正的组件名称就好了，而不是"StatelessComponent"。

我想知道为什么它是那样显示的?我确实读过一些关于在react中使用无状态组件是一种良好实践的文章，但我不确定在我的情况下是否需要这样做。谁能解释为什么chrome反应工具转换名称为无状态组件?这其中一定有重要的原因。

Answer 1

找到解决方案:

Chrome react dev tools将它们标记为无状态组件，如果你没有像这样设置displayName:

Component.displayName = "ComponentName"

如果你要用这种风格创建react组件，你必须像这样设置displayName:

ReactComponent = (props) ->

Answer 2

这里有两个选项:

选项1

const Button = ({name}) => (<button>{name}</button>);
Button.displayName = 'Button';

选项2

function Button({name}) {
  return (<button>{name}<button>);
}