Cheng Lou
11 years ago
committed by
Connor McSheffrey
4 changed files with 81 additions and 0 deletions
@ -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 |
@ -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 |
@ -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. |
@ -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…
Reference in new issue