ES 6 React классов доступа к реквизиту в поглотителе

Question

Можно ли получить доступ к срабатывает реквизит из геттера при использовании React компонентов на основе класса:

export default class Menu extends Component { 
    static propTypes = { 
    isVisible: PropTypes.bool.isRequired 
    }; 

    get close() { 
    // ... 
    } 

    get navigation() { 
    // ... 
    } 

    get content() { 
    // HERE: this.props.isVisible is not accessable??? 
    return (this.props.isVisible) ? (
     <div> 
     {this.close} 
     {this.navigation} 
     {this.footer} 
     </div> 
    ) : null; 
    } 

    render() { 
    return (
     <TransitionGroup 
     transitionName={{ 
      enter: "menu-mobile--enter", 
      enterActive: "menu-mobile--enterActive", 
      leave: "menu-mobile--leave", 
      leaveActive: "menu-mobile--leaveActive" 
     }} 
     transitionEnterTimeout={200} 
     transitionLeaveTimeout={200}> 
     {this.content} 
     </TransitionGroup> 
    );  
    } 
} 

Код выше брошенной ошибки на this.props.isVisible не доступно.

Я знаю, что это можно как-то ...

Это ошибка консоли дает мне:

Uncaught TypeError: Cannot read property 'isVisible' of undefined 

Answer 1

При использовании определения класса ES6, this не ссылается компонента; есть некоторые исключения из этого, что я не помню из головы.

Чтобы устранить это: свяжите свои методы с this в конструкторе компонентов.

export default class Menu extends Component { 
    constructor() { 
     super(); 
     this.content = this.content.bind(this); 
    } 
} 

Вы можете прочитать об этом здесь: https://facebook.github.io/react/docs/reusable-components.html#no-autobinding