title: ReactJS - How to change style and class of react component?
body: <p>I'd like to be able to change the <code>style</code> and <code>className</code> of a component before it's rendered, outside of it's render function. I've got more going on than I'm showing here, but this is the basic idea, being able to set the style and className as properties somehow:</p>
  
  <p>The following works only if the "style" variable is moved inside the render function, and added to the div like normal (e.g. <code>&lt;div style={style}&gt;</code> ). How can I make the following work?</p>
  
  <p><a href="http://jsfiddle.net/Qr6y9/1/" rel="noreferrer">JS Fiddle that doesnt work</a> </p>
  
  <p>EDIT: <a href="https://jsfiddle.net/Ldphmc9h/" rel="noreferrer">Working JS Fiddle here !</a></p>
  
  <pre><code>/** @jsx React.DOM */
  
  var Main = React.createClass({
  
      render: function() {
         var result = this.doRender();
  
         var style = {
           border:'1px solid red'
         };
  
         result.style = style;
  
         return result;
      },
  
      doRender: function() {
          return (
            &lt;div&gt;Test&lt;/div&gt;
          );
      }
  });
  
  React.renderComponent(&lt;Main/&gt;, document.body);
  </code></pre>