Getter Returns 未定义

Question

我有一个静态 getter，它在 class 中获取一个变量。但是，getter 返回未定义——而通过 this._title 获取变量效果很好。

import React, { Component } from 'react';

class ParentClass extends Component {
    _title = "Parent Class";

    static get title() {
        return this._title;
    }
}

export default class ChildClass extends ParentClass {
    _title = "Child Class";

    render() {
        return (
            <div>
                <p>{"By Variable: " + this._title}</p>
                <p>{"By Getter: " + this.title}</p>
            </div>
        )
    }
}

这是渲染结果： Result

更新：

这是我的应用程序，或者试图从外部访问 class 的应用程序：

import React, { Component } from 'react';
import ChildClass from './pages/Status';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={byu} className="App-logo" alt="logo" />
          <h2>Welcome to the P&G System Status Utility</h2>
        </div>
        <p className="App-intro">
          To get started, select a server:
        </p>
          <p>{"Outside Title: " + ChildClass.title}</p>
          <p>{"Outside Description: " + ChildClass.description}</p>
          <p>{"Outside Author: " + ChildClass.author}</p>
          <ChildClass/>
          <Scanner/>
      </div>
    );
  }
}

export default App;

这是子类（及其扩展的父类）

import React, { Component } from 'react';

class ParentClass extends Component {
    _title = "Debug";
    _description = "Debug Description";
    _author = "Arbiter";

    get title() {
        return this._title;
    }
    set title(value) {
        this._title = value;
    }

    get description() {
        return this._description;
    }
    set description(value) {
        this._description = value;
    }

    get author() {
        return this._author;
    }
    set author(value) {
        this._author = value;
    }
}

export default class ChildClass extends ParentClass {
    title = "Child Class";

    render() {
        return (
            <div>
                <p>{"Title Inside: " + this.title}</p>
                <p>{"Description Inside: " + this.description}</p>
                <p>{"Author Inside: " + this.author}</p>
            </div>
        )
    }
}

这是结果：enter image description here

（我完全不知道 Whosebug 是如何工作的）

Answer 1

I have a static getter …

这正是问题所在。不应该是static。您正在声明 ParentClass.title 而不是实例属性.

Getter Returns 未定义

Getter Returns Undefined

javascript

getter

undefined

ecmascript-6

reactjs