Browse Source

style prop value shorthand, children prop manip warning

main
Cheng Lou 11 years ago
committed by Connor McSheffrey
parent
commit
1c7b6c240f
  1. 26
      cookbook/cb-06-style-prop-value-px tip.md
  2. 31
      cookbook/cb-06-style-prop-value-px.md
  3. 10
      cookbook/cb-07-children-prop-type tip.md
  4. 14
      cookbook/cb-07-children-prop-type.md

26
cookbook/cb-06-style-prop-value-px tip.md

@ -0,0 +1,26 @@
---
id: style-prop-value-px-tip
title: Shorthand for specifying pixel values in style prop
layout: docs
permalink: style-prop-value-px-tip.html
---
When specifying a pixel value for your inline `style` prop, React actually automatically appends the string "px" for you after your number, so this works:
```js
/** @jsx React.DOM */
var divStyle = {height: 10}; // rendered as "height:10px"
React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
```
See [Inline Styles](inline-styles-tip.html) in React for more info.
Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix:
- fillOpacity
- fontWeight
- opacity
- orphans
- zIndex
- zoom

31
cookbook/cb-06-style-prop-value-px.md

@ -0,0 +1,31 @@
---
id: style-prop-value-px
title: Shorthand for specifying pixel values in style prop
layout: docs
permalink: style-prop-value-px.html
---
### Problem
It's tedious to specify an inline `style` value by appending your number value with the string "px" each time.
### Solution
React actually automatically appends the string "px" for you after your number, so this works:
```js
/** @jsx React.DOM */
var divStyle = {height: 10}; // rendered as "height:10px"
React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
```
### Discussion
See [Inline Styles](inline-styles.html) in React for more info.
Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix:
- fillOpacity
- fontWeight
- opacity
- orphans
- zIndex
- zoom

10
cookbook/cb-07-children-prop-type tip.md

@ -0,0 +1,10 @@
---
id: children-prop-type-tip
title: Type of the children prop
layout: docs
permalink: children-prop-type-tip.html
---
Usually, when manipulating a component's children through `this.props.children`, an array is expected. To save an extra array allocation, when `children` only contains one single component, it returns the component itself, without the array wrapper.
This means accessing, for example, `this.props.children.length` might be misleading since it could be the length property of a single string component.

14
cookbook/cb-07-children-prop-type.md

@ -0,0 +1,14 @@
---
id: children-prop-type
title: Type of the children prop
layout: docs
permalink: children-prop-type.html
---
### Problem
You get errors while manipulating `this.props.children` inside a component.
### Solution
Usually, `children` is an array of components. To save an extra array allocation, when it only contains one single component, it returns the component itself.
This means accessing, for example, `this.props.children.length` might be misleading since it could be the length property of a single string component.
Loading…
Cancel
Save