it's time to merge className in react

well, react is very good, i like it,but i have some question, and it’s time to fixed. 1.why support style object

style={color: 'white',backgroundImage: 'url(' + imgUrl + ')'} 

but not support className, i think className should support string,array,object,there has a classname repertory.i just want to write code like this:

<div className={['button','icon-red']}></div>
<div className={{opened:true,cloth:'red'}}></div>
<div className={'button',{opened:true,cloth:'red'}}></div>
//not
var className = react.addons.className;
var someVar = className({  //that is puzzled i think
opened:true,
cloth:'red'
});
<div className={someVar}>  

or will it be support in the feture?

[dantman]

Using classnames (which is now a dedicated module that can be used outside of React) is the best option. Even switching to classList doesn’t cover all the use cases that classnames covers. And @zpao has already partially covered the fact that props passed to ReactDOM elements are based on their DOM property equivalents not their HTML properties (el.style not style="", el.htmlFor not for="", el.acceptCharset not accept-charset="", el.useMap not usemap="").

The initial examples also aren’t very good ideas for being supported directly by react:

<div className={'button',{opened:true,cloth:'red'}}></div>

This makes sense in classnames className={cx('button', {opened:true})} but it doesn’t map to a valid js value that can be passed to props.

<div className={{opened:true,cloth:'red'}}></div>

I’m also not sure what this example is supposed to be requesting. cloth: 'red' doesn’t make sense. String keys aren’t even a pattern implemented in classnames.

[zpao]

Thanks for bringing it up. It’s a valid question and one we’ve discussed before. For now, our current behavior exists to stay inline with expected DOM behavior. className is a string. If we did make a change like suggested, we would probably just use classList, which is another DOM property more like an array. We’d still need to convert from a vanilla array and make add/remove calls (we also then need to do more work to make sure we clone the array you provide as props - simple equality will no longer work since it would be very possible to pass the same array reference as props on 2 render passes)

Regardless, this is really only important at the DOM element level. You composite components can take whatever props they want and convert to strings when rendering DOM elements.