title: React anti pattern?
body: <p>Is the following an anti pattern in React? I like the pattern because it gives me context in static functions when a component has been instantiated. Then later I can import the class and call a static method to modify state. Or can this be done in a better way?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// componentA.js
  
  function bleedContext() {
    ComponentA.staticMethod = ComponentA.staticMethod.bind(this)
  }
  
  export default class ComponentA {
    static staticMethod() {
      this.setState({foo: 'bar'})
    }
    
    constructor() {
      this.state = {}
      bleedContext.call(this)
    }
    
    render() {
      return (
        ...
      )
    }
  }
  
  // componentB.js
  
  import ComponentA from 'path/to/componentA'
  
  export default class ComponentB {  
    handleClick() {
      ComponentA.staticMethod()
    }
    
    render() {
      return (
        &lt;button onClick={this.handleClick} /&gt;
      )
    }
  }</code></pre>
  </div>
  </div>
  </p>