Question

我安装了chrome react开发工具，我已经使用了几天了。通过chrome反应工具可以看到React组件名称非常方便。我一直在想为什么对于我的一些组件，chrome开发人员工具将组件的名称转换为“StatelessComponent”。在那里拥有真正的组件名称会很好，而不是'StatelessComponent'。

我想知道为什么会这样表现出来？我确实读过一些关于在反应中使用无状态组件的一些好习惯，但我不确定在我的情况下是否需要。任何人都可以解释为什么chrome反应工具将名称转换为StatelessComponents？必须有一个重要原因。

Answer 1

找到解决方案：

如果你没有像这样设置displayName，那么Chrome反应工具会将它们标记为无状态组件：

Component.displayName = "ComponentName"

如果要使用此样式创建react组件，则必须像这样设置displayName：

ReactComponent = (props) ->

Answer 2

这里有两个选项：

选项1

@extends('layouts.dashboard')

@section('content')
<div class="container">
    <div class="row col-md-10 custyle">
        @extends('layouts.panel', ['title' => "Categories"] )
        @section('content_panel')
            <table class="table table-striped custab">
                 ...
            </table>
        @stop
@stop

选项2

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

React：Chrome将工具标签组件作为无状态组件进行反应

2 个答案: