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

Question

我安装了 chrome React 开发者工具，我已经使用了几天了。通过 chrome react 工具可以看到 React 组件名称，这非常方便。我一直想知道为什么对于我的某些组件，chrome 开发人员工具将组件的名称转换为 'StatelessComponent'。最好将真正的组件名称放在那里，而不是 'StatelessComponent'。

我想知道为什么会这样显示？我确实读过一些关于在 React 中使用无状态组件是一种很好的做法，但我不确定我的情况是否需要这样做。谁能解释为什么 chrome 反应工具将名称转换为 StatelessComponents？一定有重要的原因。

Answer 1

找到解决方案：

Chrome 如果您没有像这样设置 displayName，则反应开发工具将它们标记为无状态组件：

Component.displayName = "ComponentName"

如果您使用这种样式创建反应组件，则必须像这样设置显示名称：

ReactComponent = (props) ->

Answer 2

这里有两个选择：

选项 1

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

选项 2

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