Где объявить переменную в react js

Question

Где объявить переменную в react js

Я пытаюсь объявить переменную в классе react-js. Переменная должна быть доступна в различных функциях. Это мой код

class MyContainer extends Component {

    constructor(props) {

        super(props);

        this.testVarible= "this is a test";  // I declare the variable here

    }

    onMove() {

        console.log(this.testVarible); //I try to access it here

    }

}

Onmove, значение этого.тест не определен. Я знаю, что я мог бы поставить значение на состояние, но я не хочу этого делать, потому что каждый раз, когда значение изменяется, будет вызываться render (), который не является необходимым. Я новичок, чтобы реагировать, я сделал что-то не так?

1067 2

javascript reactjs

2 ответов:

Comments

Ничего не найдено.

Brijesh Bhakta · Accepted Answer · 2017-11-21 18:12:39

Использование синтаксиса ES6 в React не привязывает this к определяемым пользователем функциям, но будет привязывать this к методам жизненного цикла компонентов.
Таким образом, функция, которую вы объявили, не будет иметь тот же контекст, что и класс, и попытка получить доступ к this не даст вам того, что вы ожидаете.
Для получения контекста класса необходимо привязать контекст функции или использовать функции со стрелками.

Метод 1 для привязки контекста:
class MyContainer extends Component {

    constructor(props) {
        super(props);
        this.onMove = this.onMove.bind(this);
        this.testVarible= "this is a test";
    }

    onMove() {
        console.log(this.testVarible);
    }
}
Метод 2 для связывания контекст:
class MyContainer extends Component {

    constructor(props) {
        super(props);
        this.testVarible= "this is a test";
    }

    onMove = () => {
        console.log(this.testVarible);
    }
}
Метод 2 является моим предпочтительным способом , но вы можете выбрать свой собственный.

Timo · Accepted Answer · 2017-11-21 17:57:55

Предполагая, что onMove является обработчиком событий, вполне вероятно, что его контекст является чем-то иным, чем экземпляр MyContainer, т. е. this указывает на что-то другое.

Вы можете вручную привязать контекст функции во время построения экземпляра через Function.bind:
class MyContainer extends Component {
  constructor(props) {
    super(props);

    this.onMove = this.onMove.bind(this);

    this.test = "this is a test";
  }

  onMove() {
    console.log(this.test);
  }
}
Также, test !== testVariable.