Special case arrays for some DOM properties

[zpao]

Very often we have code that uses transferPropsTo, but it's very heavy handed. Often times we just want to add a class or some style based on an option.

Currently if we want to do that it looks something like this:

var joinClasses = require('joinClasses');
// ...
var MyComponent = React.createClass({
  render: function() {
    return <div className={joinClasses(this.props.className, "something")} />
  }
});

While it's not too bad once, we sometimes do this with style as well. And longer classnames. Multiply by a large number and we're in a situation that adds a lot of duplicate work for developers.

So we want to make this better. Some of us talked about a few different ideas here, but we want a combination of explicit and not too much magic. One idea was a magical prop that could be used to pass through.

return <div props={{className: this.props.className}} className="something" />

On the surface this looks great, but then we need to bake knowledge of certain props into composite components (is it a string?) and we're not guaranteed that the component is using a prop in the same way it's used in the DOM.

So what we settled on for the least surprising is in line with some of the special casing React does for some DOM properties. Right now we have booleans which get handled specially. What we're planning is the ability to special case arrays. This allows us to do this:

return <div className={[this.props.className, "something"]} />

We would need to do this for individual properties and not apply the same handling for every property. For example, className would basically need to flatten and then join with a space. style would need to flatten and merge all objects.

This will diverge slightly from our current behavior of just stringifying allmost properties.

[sebmarkbage]

Let's have this discussion in react-future so that it's consistent with other plans. reactjs/react-future#11