style prop value shorthand, children prop manip warning
Cheng Lou committed
Sep 30, 2013 at 13:06 UTC
f4bbe9c2966de4ae5569f6d12e26662704d4171a
4 files changed
+81
docs/cookbook/cb-06-style-prop-value-px tip.md
new
+26
@@ -0,0 +1,26 @@
1
+---
2
+id: style-prop-value-px-tip
3
+title: Shorthand for specifying pixel values in style prop
4
+layout: docs
5
+permalink: style-prop-value-px-tip.html
6
+---
7
+
8
+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:
9
+
10
+```js
11
+/** @jsx React.DOM */
12
+
13
+var divStyle = {height: 10}; // rendered as "height:10px"
14
+React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
15
+```
16
+
17
+See [Inline Styles](inline-styles-tip.html) in React for more info.
18
+
19
+Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix:
20
+
21
+- fillOpacity
22
+- fontWeight
23
+- opacity
24
+- orphans
25
+- zIndex
26
+- zoom
docs/cookbook/cb-06-style-prop-value-px.md
new
+31
@@ -0,0 +1,31 @@
1
+---
2
+id: style-prop-value-px
3
+title: Shorthand for specifying pixel values in style prop
4
+layout: docs
5
+permalink: style-prop-value-px.html
6
+---
7
+
8
+### Problem
9
+It's tedious to specify an inline `style` value by appending your number value with the string "px" each time.
10
+
11
+### Solution
12
+React actually automatically appends the string "px" for you after your number, so this works:
13
+
14
+```js
15
+/** @jsx React.DOM */
16
+
17
+var divStyle = {height: 10}; // rendered as "height:10px"
18
+React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);
19
+```
20
+
21
+### Discussion
22
+See [Inline Styles](inline-styles.html) in React for more info.
23
+
24
+Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix:
25
+
26
+- fillOpacity
27
+- fontWeight
28
+- opacity
29
+- orphans
30
+- zIndex
31
+- zoom
docs/cookbook/cb-07-children-prop-type tip.md
new
+10
@@ -0,0 +1,10 @@
1
+---
2
+id: children-prop-type-tip
3
+title: Type of the children prop
4
+layout: docs
5
+permalink: children-prop-type-tip.html
6
+---
7
+
8
+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.
9
+
10
+This means accessing, for example, `this.props.children.length` might be misleading since it could be the length property of a single string component.
docs/cookbook/cb-07-children-prop-type.md
new
+14
@@ -0,0 +1,14 @@
1
+---
2
+id: children-prop-type
3
+title: Type of the children prop
4
+layout: docs
5
+permalink: children-prop-type.html
6
+---
7
+
8
+### Problem
9
+You get errors while manipulating `this.props.children` inside a component.
10
+
11
+### Solution
12
+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.
13
+
14
+This means accessing, for example, `this.props.children.length` might be misleading since it could be the length property of a single string component.