From 4a80d994d412a378ceb70742ad9e5286b22952b3 Mon Sep 17 00:00:00 2001 From: Stefan Dombrowski Date: Wed, 25 Nov 2015 17:34:40 +0100 Subject: [PATCH] [docs] Single Child * Single Child belongs to Prop Validation, so it was moved there. * "throw" was changed to "warn". --- docs/05-reusable-components.md | 44 +++++++++++++++++----------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/docs/05-reusable-components.md b/docs/05-reusable-components.md index 75e23858..337796b0 100644 --- a/docs/05-reusable-components.md +++ b/docs/05-reusable-components.md @@ -78,6 +78,28 @@ React.createClass({ }); ``` +### Single Child + +With `React.PropTypes.element` you can specify that only a single child can be passed to +a component as children. + +```javascript +var MyComponent = React.createClass({ + propTypes: { + children: React.PropTypes.element.isRequired + }, + + render: function() { + return ( +
+ {this.props.children} // This must be exactly one element or it will warn. +
+ ); + } + +}); +``` + ## Default Prop Values React lets you define default values for your `props` in a very declarative way: @@ -115,28 +137,6 @@ ReactDOM.render( ); ``` -## Single Child - -With `React.PropTypes.element` you can specify that only a single child can be passed to -a component as children. - -```javascript -var MyComponent = React.createClass({ - propTypes: { - children: React.PropTypes.element.isRequired - }, - - render: function() { - return ( -
- {this.props.children} // This must be exactly one element or it will throw. -
- ); - } - -}); -``` - ## Mixins Components are the best way to reuse code in React, but sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern). React provides `mixins` to solve this problem.