Allow props to be a plain string, specifying className #3408

Closed
wants to merge 2 commits into
from

Projects

None yet

3 participants

@danielearwicker

A tiny, low-impact (basically non-breaking) change that I find makes a big difference to succinctness when rendering without JSX. I've added a minimal test, checked lint, and submitted the CLA.

Render declaration trees tend to frequently include instances of div and span which only have className and nothing else, because they're purely structural and provide a way for CSS to inject styling.

Also with ES destructuring assignment, I can say:

var { DOM: { div, span, p, input, button } } = React;

This succinctly imports frequently used elements into the scope, and combined with this pull-request, allows me to write render functions like this:

render() {
  return div('container',
           div('heading',
             span('column1'),
             span('column2')
           ),
           div('blah')
         );
}

This makes it somewhat more succinct than JSX! :)

The prior code was written to assume that props is an object, so this change simply checks for a string and converts it to an object with a property className.

Regarding static typing, no change is required to the react.d.ts file on DefinitelyTyped because all the properties of HTMLAttributes are optional, so string already conforms to it.

Furthermore, designers of components could optionally support a className property in their props if they wanted to be able to accept a string in this way (which they could then interpret however they wished). Although the main purpose here is to make plain DOM elements more succinct.

@zpao
Member
zpao commented Mar 13, 2015

We're not going to do this. The concept of elements is not specific to the DOM and so we're not planning on adding shortcuts like this.

@zpao zpao closed this Mar 13, 2015
@danielearwicker

The usefulness of this change is not limited to DOM elements, though it would have the most immediate, widespread benefit for DOM elements (see last paragraph).

@spicyj
Member
spicyj commented Mar 13, 2015

className doesn't have any significance in other environments, like React Native. You're free to create a wrapper in your own code for this if you prefer but we won't support it as part of the core. Thanks for sending in the idea though – always good to have people thinking about how we can make the API better.

@danielearwicker

No problem, I wrote it as an external wrapper to begin with.

To emphasise again, under this change className just carries a string that components can interpret however they wished, so this doesn't skew the concept of properties toward the traditional browser DOM at all. It just makes it possible for components of any kind to optionally support a plain string to have whatever meaning makes sense (if any). I made it map to a property called className so it would immediately have value for a very common, widely applicable use case, but the name is not actually of any other significance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment