ES 6は、アクセスすることが可能であるゲッター

Question

に小道具へのクラスアクセスを反応させる反応させ、クラスベースのコンポーネント使用時ゲッターから小道具を反応：

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