ReactJS ES6 Проблема с классом импорта

Question

В ReactJS я пытаюсь сделать что-то очень простое. У меня есть класс, который я создал:

//SomeName.js 
class SomeName { 
    constructor(name){ 
     this.name = name; 
    } 
} 

В моем React.component у меня есть:

//Index.js 
import React from 'react' 
import SomeName from './parts/SomeName' 

class Index extends React.Component{ 

    constructor(){ 
     super(); 
     let newName = new SomeName("John Doe"); 
     this.getName = this.getName.bind(this); 
    } 

    getName(){ 
     return newName; 
    } 

    render() { 
     return (
      <div className="pages-container"> 

       Hello {this.getName} 

      </div> 
     ) 
    } 
}; 

Однако я придерживаюсь отладчик в моем конструкторе index.js, я не получаю ссылку на SomeName. Каждая ссылка, на которую я смотрел, показывает, что это делается так (но не в ReactJS), и у меня нет проблем с импортированием моих компонентов, которые я создаю, только когда я пытаюсь вернуть это значение. Я чувствую, что есть что-то действительно простое, что мне не хватает, я просто не знаю, что. Может кто-нибудь протянуть руку?

Answer 1

1) Вы определяете newName как локальную переменную. Для того, чтобы сделать его доступным в getName вы должны назначить его в this:

constructor() { 
    super(); 
    this.newName = new SomeName("John Doe"); // fixed here 
    this.getName = this.getName.bind(this); 
} 

getName(){ 
    return this.newName; // and here 
} 

2) Вы должны вызвать getName в методе render. В противном случае вы получите эту функцию, а не результат:

render() { 
    return (
     <div className="pages-container"> 

      Hello {this.getName()} //do not forget parentheses 

     </div> 
    ) 
}