Класс es6: как опустить ключевое слово "this"

Question

В ES6 возможно ли создавать локальные переменные и просто ссылаться на них напрямую, вместо добавления this. впереди, как this.name,

Пример, в коде ниже, что я могу сделать, чтобы можно было написать {name} вместо {this.name} все время. (Добавление this. перед переменными немного громоздко!)

class User extend React.Component {
    name = "Joe";

    render() {
        // is it possible to write {name} instead of {this.name}
        return <div>{name}</div>
    }
}

Answer 1

Это возможно с with утверждение, но так как он не совместим со строгим режимом, он не имеет значения в современном JS.

Там нет никакого способа сделать это иначе, и так как this.name не следует путать с name переменная, опуская this было бы ошибкой.

Если this.name в JSX влияет на читабельность или используется многократно, свойство может быть деструктурировано:

render() {
    const { name } = this;

    return <div>{name}</div>
}