in a react component, how to get `this` in static function?

9
votes

attempting to create a static function within a react component. the function uses this to get its data, but this is out of scope when the function is called.

here is a very simple example:

var Test = React.createClass({
  val: 5,
  statics: {
    getVal: function() { return this.val }
  },
  render: return( <div>{this.val}</div> )
});

Test.getVal(); => undefined!!

obviously this has lost its scope when Test.getVal() is called. how to get this inside the getVal() function?

fyi, the following standard javascript parent approach does not work:

Test.getVal.apply( Test ); => undefined
2
javascriptreactjsthisreact-jsx
possible duplicate of Javascript objects: get parent – Bhojendra Rauniyar
Have you considered storing val as a prop of the component and placing getVal outside of the statics block? Not sure if that is an option in your situation but it should make it easier to access the prop that way. – noveyak
@BhojendraNepal - wish it were the same. will add example to question – cc young
@noveyak - I thought the whole idea of static is that it's call outside the component in "regular" javascript, which is what I want to do – cc young

2 Answers

10
votes

Check out the docs on statics.

Whatever you put in statics is not going to have the context of an actual React component instance, but the val property you're defining is a property of an actual React component instance. It's not going to exist before you actually render the component, because that's when all the non-static properties are constructed. Statics are supposed to be component-related functions that are usable outside the context of an actual instance, just like for example static functions in C# and many other languages.

It simply doesn't seem to make sense to want to access a React component instance from a statics function. Maybe you need to think over what you're actually trying to achieve. If you really want to be able to access a specific component's properties, then I guess you can pass the instance as an argument to the static function, but then of course that would be usable once you have actually constructed a component.

0
votes

Ahh ok misunderstanding. If you need to somehow be able to call this method whenever then your val must be located in statics as well but your render function would then have to reference Test.val instead of this.val. If this isn't a requirement though it would be best to stick to props/state and accessing things from within the component since the component will not autoupdate based on changes to the val.

var Test = React.createClass({
  statics: {
    val: 5,
    getVal: function() { 
        return this.val
    }
  },
  render: function(){
      return( <div>{Test.val}</div> )
  }
});

console.log('VAL IS' , Test.getVal());

Link to fiddle with example https://jsfiddle.net/dgoks3Lo/