zoukankan      html  css  js  c++  java
  • React Error 无法分配为只读函数"类"的属性名称

    在React 中我创建一个类组件,并且给类添加了一个静态属性 name

    import React from 'react';
    
    export default class Content extends React.Component {
      static name = 'Content';
      render() {
        return (
          <div>
            {this.props.children}
          </div>
        );
      }
    }
    

    运行时报如下错误:

    ×
    TypeError: Cannot assign to read only property 'name' of function 'class Content extends react__WEBPACK_IMPORTED_MODULE_0___default.a.Component {
      render() {
        return react__W...<omitted>...
    }'
    Module../src/Content.js
    src/Content.js:8
       5 | 
       6 | import React from 'react';
       7 | 
    >  8 | export default class Content extends React.Component {
       9 |   static name = 'Content';
      10 |   render() {
      11 |     return (
    

    难道语法不正确吗?我查阅了一下ES6 Class 文档,发现这种写法没问题呀,虽然是较新的语法(ES7),我相信 React 内部一定用 babel 给转成 ES5 语法了呀。

    再次证明这种写法是正确的。再次查阅ES6 Class 资料,发现每个类自身都带有name属性。
    ES6的类只是ES5的构造函数的一层包装,所以函数的许多特性都被 Class 类继承,包括name 属性。name 属性总是返回紧跟在 class 关键字后面的类名。

    现在报错原因终于找到了,因为我们不能在类内部修改类自身的 name 名称。

    解决办法:

    给类定义一个除了 name 以外的静态属性。

  • 相关阅读:
    随笔
    我的舅舅
    代码规范
    SpringMVC_乱码问题
    SpringMVC_接受请求及数据回显
    Restful风格
    第六周总结
    SpringMVC_控制器
    SpringMVC_初次使用
    SpringMVC_简介
  • 原文地址:https://www.cnblogs.com/qiqingfu/p/12396275.html
Copyright © 2011-2022 走看看