javascript - ES 6 React classes access to props in a getter - Stack Overflow

admin管理员组

文章数量:1331917

Is it possible to access react props from a getter when using React class based ponents:

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>
    );    
  }
}

The code above thrown an error on this.props.isVisible it is not accessable.

I know this is possible somehow...

This is the error the consoles gives me:

Uncaught TypeError: Cannot read property 'isVisible' of undefined

Is it possible to access react props from a getter when using React class based ponents:

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>
    );    
  }
}

The code above thrown an error on this.props.isVisible it is not accessable.

I know this is possible somehow...

This is the error the consoles gives me:

Uncaught TypeError: Cannot read property 'isVisible' of undefined

• javascript
• reactjs
• ecmascript-6

Share Improve this question Follow edited May 26, 2016 at 13:28 randomKek asked May 26, 2016 at 13:20 randomKekrandomKek 1,12833 gold badges1818 silver badges3434 bronze badges 4

• 2 What makes you think that the value is not accessible? – Felix Kling Commented May 26, 2016 at 13:25
• @FelixKling Uncaught TypeError: Cannot read property 'isVisible' of undefined – randomKek Commented May 26, 2016 at 13:27
• 1 Mmh, I don't see why this shouldn't refer to the ponent... :-/ – Felix Kling Commented May 26, 2016 at 13:32
• Do you have a stack trace? Is that the only location where you access .content? Does it work when it's a method not a getter? – Bergi Commented May 26, 2016 at 13:49

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

When using the es6 class definition, this does not refer to your ponent; there are some exceptions to this that I don't remember of the top of my head.

To counter this: bind your methods to this in your ponents constructor.

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

You can read more about it here: https://facebook.github.io/react/docs/reusable-ponents.html#no-autobinding

本文标签： javascriptES 6 React classes access to props in a getterStack Overflow