抛出一个函数来响应标记名称，如何调试该函数

Question

当我打印标签名称时，它会抛出一个功能
的的console.log（SportsPage）;

你知道原因吗？

在下面提供我的代码：

console.log(SportsPage);
<SportsPage name={this.props.name} completed={status.state.status}>
    <Input
        sportsRefrence={sportsRefrence}
    />
</SportsPage>

Answer 1

此代码使用JSX，这是一个Javascript语法扩展。将JSX视为HTML是很诱人的，但这是错误 - 它编译为Javascript。 React使用函数来创建元素。当您console.log(SportsPage)时，您正在记录您在其他地方定义的SportsPage类的实例（也就是您的React组件）和Javascript类are just functions。

至于调试，您几乎总是要调试组件的 props 和 state ，而不是组件实例本身。 React为此提供了一些很棒的lifecycle methods。例如，如果您发现您的组件呈现的次数超出预期，您可以查看道具并说明它正在接收并与componentWillUpdate方法中的内容进行比较。