I'd like to be able to change the style and className 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:

The following works only if the "style" variable is moved inside the render function, and added to the div like normal (e.g. <div style={style}> ). How can I make the following work?

JS Fiddle that doesnt work

EDIT: Working JS Fiddle here !

/** @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 (
          <div>Test</div>
        );
    }
});

React.renderComponent(<Main/>, document.body);

I'd like to be able to change the style and className 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:

The following works only if the "style" variable is moved inside the render function, and added to the div like normal (e.g. <div style={style}> ). How can I make the following work?

JS Fiddle that doesnt work

EDIT: Working JS Fiddle here !

/** @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 (
          <div>Test</div>
        );
    }
});

React.renderComponent(<Main/>, document.body);

• javascript
• facebook
• reactjs

2 Answers 2

React elements are designed to be immutable; usually your app will be easiest to understand if you restructure it to build the proper props upfront instead of mutating them later, and React assumes that this is the case. That said, you can use React.cloneElement to get the effect you want:

render: function() {
    return React.cloneElement(this.doRender(), {
        style: {border: '1px solid red'}
    });
},

(Note that if your doRender() function returned a custom component then changing the props would change that component's props, not the underlying DOM component that gets produced. There's no way to render it down to a DOM component and change that component's props, short of manually mutating the DOM in componentDidMount.)

you can try this game

componentDidMount() {
  document.querySelector('.yourClassName').style = 'your: style'
}