{"body":"","parents":["9b1ee4de4636fcc9af1cf93099e062a3f6eb96f5"],"patch":"diff --git a\/docs\/docs\/02.2-jsx-spread.md b\/docs\/docs\/02.2-jsx-spread.md\nindex d07c4ed29b..7a147584cb 100644\n--- a\/docs\/docs\/02.2-jsx-spread.md\n+++ b\/docs\/docs\/02.2-jsx-spread.md\n@@ -68,4 +68,4 @@ Merging two objects can be expressed as:\n \n > Note:\n >\n-> Activate experimental syntax by using the [JSX command-line tool](http:\/\/npmjs.org\/package\/react-tools) with the `--harmony` flag.\n+> Use the [JSX command-line tool](http:\/\/npmjs.org\/package\/react-tools) with the `--harmony` flag to activate the experimental ES7 syntax.\ndiff --git a\/docs\/docs\/05-reusable-components.md b\/docs\/docs\/05-reusable-components.md\nindex 7835c9a5ae..5ad85a53e1 100644\n--- a\/docs\/docs\/05-reusable-components.md\n+++ b\/docs\/docs\/05-reusable-components.md\n@@ -3,7 +3,7 @@ id: reusable-components\n title: Reusable Components\n permalink: reusable-components.html\n prev: multiple-components.html\n-next: forms.html\n+next: transferring-props.html\n ---\n \n When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc) into reusable components with well-defined interfaces. That way, the next time you need to build some UI you can write much less code, which means faster development time, fewer bugs, and fewer bytes down the wire.\ndiff --git a\/docs\/docs\/06-transferring-props.md b\/docs\/docs\/06-transferring-props.md\nnew file mode 100644\nindex 0000000000..f93fbe2fe2\n--- \/dev\/null\n+++ b\/docs\/docs\/06-transferring-props.md\n@@ -0,0 +1,159 @@\n+---\n+id: transferring-props\n+title: Transferring Props\n+permalink: transferring-props.html\n+prev: reusable-components.html\n+next: forms.html\n+---\n+\n+It's a common pattern in React to wrap a component in an abstraction. The outer component exposes a simple property to do something that might have more complex implementation details.\n+\n+You can use [JSX spread attributes](\/react\/docs\/jsx-spread.html) to merge the old props with additional values:\n+\n+```javascript\n+return ;\n+```\n+\n+If you don't use JSX, you can use any object helper such as ES6 `Object.assign` or Underscore `_.extend`:\n+\n+```javascript\n+return Component(Object.assign({}, this.props, { more: 'values' }));\n+```\n+\n+The rest of this tutorial explains best practices. It uses JSX and experimental ES7 syntax.\n+\n+## Manual Transfer\n+\n+Most of the time you should explicitly pass the properties down. That ensures that you only exposes a subset of the inner API, one that you know will work.\n+\n+```javascript\n+var FancyCheckbox = React.createClass({\n+ render: function() {\n+ var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';\n+ return (\n+

\n+ {this.props.children}\n+ <\/div>\n+ );\n+ }\n+});\n+React.renderComponent(\n+ \n+ Hello world!\n+ <\/FancyCheckbox>,\n+ document.body\n+);\n+```\n+\n+But what about the `name` prop? Or the `title` prop? Or `onMouseOver`?\n+\n+## Transferring with `...` in JSX\n+\n+Sometimes it's fragile and tedious to pass every property along. In that case you can use [destructuring assignment](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment) with rest properties to extract a set of unknown properties.\n+\n+List out all the properties that you would like to consume, followed by `...other`.\n+\n+```javascript\n+var { checked, ...other } = this.props;\n+```\n+\n+This ensures that you pass down all the props EXCEPT the ones you're consuming yourself.\n+\n+```javascript\n+var FancyCheckbox = React.createClass({\n+ render: function() {\n+ var { checked, ...other } = this.props;\n+ var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';\n+ \/\/ `other` contains { onClick: console.log } but not the checked property\n+ return (\n+

\n+ );\n+ }\n+});\n+React.renderComponent(\n+ \n+ Hello world!\n+ <\/FancyCheckbox>,\n+ document.body\n+);\n+```\n+\n+> NOTE:\n+> \n+> In the example above, the `checked` prop is also a valid DOM attribute. If you didn't use destructuring in this way you might inadvertently pass it along.\n+\n+Always use the destructuring pattern when transferring unknown `other` props.\n+\n+```javascript\n+var FancyCheckbox = React.createClass({\n+ render: function() {\n+ var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';\n+ \/\/ ANTI-PATTERN: `checked` would be passed down to the inner component\n+ return (\n+

\n+ );\n+ }\n+});\n+```\n+\n+## Consuming and Transferring the Same Prop\n+\n+If your component wants to consume a property but also pass it along, you can repass it explicitly `checked={checked}`. This is preferable to passing the full `this.props` object since it's easier to refactor and lint.\n+\n+```javascript\n+var FancyCheckbox = React.createClass({\n+ render: function() {\n+ var { checked, title, ...other } = this.props;\n+ var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';\n+ var fancyTitle = checked ? 'X ' + title : 'O ' + title;\n+ return (\n+ \n+ \n+ {fancyTitle}\n+ <\/label>\n+ );\n+ }\n+});\n+```\n+\n+> NOTE:\n+> \n+> Order matters. By putting the `{...other}` before your JSX props you ensure that the consumer of your component can't override them. In the example above we have guaranteed that the input will be of type `\"checkbox\"`.\n+\n+## Rest and Spread Properties `...`\n+\n+Rest properties allow you to extract the remaining properties from an object into a new object. It excludes every other property listed in the destructuring pattern.\n+\n+This is an experimental implementation of an [ES7 proposal](https:\/\/github.com\/sebmarkbage\/ecmascript-rest-spread).\n+\n+```javascript\n+var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };\n+x; \/\/ 1\n+y; \/\/ 2\n+z; \/\/ { a: 3, b: 4 }\n+```\n+\n+> Note:\n+>\n+> Use the [JSX command-line tool](http:\/\/npmjs.org\/package\/react-tools) with the `--harmony` flag to activate the experimental ES7 syntax.\n+\n+## Transferring with Underscore\n+\n+If you don't use JSX, you can use a library to achieve the same pattern. Underscore supports `_.omit` to filter out properties and `_.extend` to copy properties onto a new object.\n+\n+```javascript\n+var FancyCheckbox = React.createClass({\n+ render: function() {\n+ var checked = this.props.checked;\n+ var other = _.omit(this.props, 'checked');\n+ var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';\n+ return (\n+ React.DOM.div(_.extend({}, other, { className: fancyClass }))\n+ );\n+ }\n+});\n+```\ndiff --git a\/docs\/docs\/06-forms.md b\/docs\/docs\/07-forms.md\nsimilarity index 99%\nrename from docs\/docs\/06-forms.md\nrename to docs\/docs\/07-forms.md\nindex 1dad3ea490..475c9183e4 100644\n--- a\/docs\/docs\/06-forms.md\n+++ b\/docs\/docs\/07-forms.md\n@@ -2,7 +2,7 @@\n id: forms\n title: Forms\n permalink: forms.html\n-prev: reusable-components.html\n+prev: transferring-props.html\n next: working-with-the-browser.html\n ---\n \ndiff --git a\/docs\/docs\/07-working-with-the-browser.md b\/docs\/docs\/08-working-with-the-browser.md\nsimilarity index 100%\nrename from docs\/docs\/07-working-with-the-browser.md\nrename to docs\/docs\/08-working-with-the-browser.md\ndiff --git a\/docs\/docs\/07.1-more-about-refs.md b\/docs\/docs\/08.1-more-about-refs.md\nsimilarity index 100%\nrename from docs\/docs\/07.1-more-about-refs.md\nrename to docs\/docs\/08.1-more-about-refs.md\ndiff --git a\/docs\/docs\/08-tooling-integration.md b\/docs\/docs\/09-tooling-integration.md\nsimilarity index 100%\nrename from docs\/docs\/08-tooling-integration.md\nrename to docs\/docs\/09-tooling-integration.md\ndiff --git a\/docs\/docs\/09-addons.md b\/docs\/docs\/10-addons.md\nsimilarity index 100%\nrename from docs\/docs\/09-addons.md\nrename to docs\/docs\/10-addons.md\ndiff --git a\/docs\/docs\/09.1-animation.md b\/docs\/docs\/10.1-animation.md\nsimilarity index 100%\nrename from docs\/docs\/09.1-animation.md\nrename to docs\/docs\/10.1-animation.md\ndiff --git a\/docs\/docs\/09.2-form-input-binding-sugar.md b\/docs\/docs\/10.2-form-input-binding-sugar.md\nsimilarity index 100%\nrename from docs\/docs\/09.2-form-input-binding-sugar.md\nrename to docs\/docs\/10.2-form-input-binding-sugar.md\ndiff --git a\/docs\/docs\/09.3-class-name-manipulation.md b\/docs\/docs\/10.3-class-name-manipulation.md\nsimilarity index 100%\nrename from docs\/docs\/09.3-class-name-manipulation.md\nrename to docs\/docs\/10.3-class-name-manipulation.md\ndiff --git a\/docs\/docs\/09.4-test-utils.md b\/docs\/docs\/10.4-test-utils.md\nsimilarity index 100%\nrename from docs\/docs\/09.4-test-utils.md\nrename to docs\/docs\/10.4-test-utils.md\ndiff --git a\/docs\/docs\/09.5-clone-with-props.md b\/docs\/docs\/10.5-clone-with-props.md\nsimilarity index 100%\nrename from docs\/docs\/09.5-clone-with-props.md\nrename to docs\/docs\/10.5-clone-with-props.md\ndiff --git a\/docs\/docs\/09.6-update.md b\/docs\/docs\/10.6-update.md\nsimilarity index 100%\nrename from docs\/docs\/09.6-update.md\nrename to docs\/docs\/10.6-update.md\ndiff --git a\/docs\/docs\/09.7-pure-render-mixin.md b\/docs\/docs\/10.7-pure-render-mixin.md\nsimilarity index 100%\nrename from docs\/docs\/09.7-pure-render-mixin.md\nrename to docs\/docs\/10.7-pure-render-mixin.md\ndiff --git a\/docs\/docs\/09.8-perf.md b\/docs\/docs\/10.8-perf.md\nsimilarity index 100%\nrename from docs\/docs\/09.8-perf.md\nrename to docs\/docs\/10.8-perf.md\ndiff --git a\/docs\/docs\/ref-02-component-api.md b\/docs\/docs\/ref-02-component-api.md\nindex 35d01fa7c1..2deeef703e 100644\n--- a\/docs\/docs\/ref-02-component-api.md\n+++ b\/docs\/docs\/ref-02-component-api.md\n@@ -70,33 +70,6 @@ bool isMounted()\n `isMounted()` returns true if the component is rendered into the DOM, false otherwise. You can use this method to guard asynchronous calls to `setState()` or `forceUpdate()`.\n \n \n-### transferPropsTo\n-\n-```javascript\n-ReactComponent transferPropsTo(ReactComponent targetComponent)\n-```\n-\n-Transfer properties from this component to a target component that have not already been set on the target component. After the props are updated, `targetComponent` is returned as a convenience. This function is useful when creating simple HTML-like components:\n-\n-```javascript\n-var Avatar = React.createClass({\n- render: function() {\n- return this.transferPropsTo(\n-

\n- );\n- }\n-});\n-\n-\/\/ \n-```\n-\n-Properties that are specified directly on the target component instance (such as `src` and `userId` in the above example) will not be overwritten by `transferPropsTo`.\n-\n-> Note:\n->\n-> Use `transferPropsTo` with caution; it encourages tight coupling and makes it easy to accidentally introduce implicit dependencies between components. When in doubt, it's safer to explicitly copy the properties that you need onto the child component.\n-\n-\n ### setProps\n \n ```javascript\n","commit":{"authorEmail":"sema@fb.com","authoredAt":"2014-10-26T23:52:37-07:00","subject":"Replace transferPropsTo with transferring props patterns","revision":"b7a548c4bff8fb420873d7756042a16004ecbce9","authorName":"Sebastian Markbage","shortRevision":"b7a548c4bf"},"files":[{"status":"M","path":"docs\/docs\/02.2-jsx-spread.md"},{"status":"M","path":"docs\/docs\/05-reusable-components.md"},{"status":"A","path":"docs\/docs\/06-transferring-props.md"},{"status":"R099","path":"docs\/docs\/07-forms.md","previousPath":"docs\/docs\/06-forms.md"},{"status":"R100","path":"docs\/docs\/08-working-with-the-browser.md","previousPath":"docs\/docs\/07-working-with-the-browser.md"},{"status":"R100","path":"docs\/docs\/08.1-more-about-refs.md","previousPath":"docs\/docs\/07.1-more-about-refs.md"},{"status":"R100","path":"docs\/docs\/09-tooling-integration.md","previousPath":"docs\/docs\/08-tooling-integration.md"},{"status":"R100","path":"docs\/docs\/10-addons.md","previousPath":"docs\/docs\/09-addons.md"},{"status":"R100","path":"docs\/docs\/10.1-animation.md","previousPath":"docs\/docs\/09.1-animation.md"},{"status":"R100","path":"docs\/docs\/10.2-form-input-binding-sugar.md","previousPath":"docs\/docs\/09.2-form-input-binding-sugar.md"},{"status":"R100","path":"docs\/docs\/10.3-class-name-manipulation.md","previousPath":"docs\/docs\/09.3-class-name-manipulation.md"},{"status":"R100","path":"docs\/docs\/10.4-test-utils.md","previousPath":"docs\/docs\/09.4-test-utils.md"},{"status":"R100","path":"docs\/docs\/10.5-clone-with-props.md","previousPath":"docs\/docs\/09.5-clone-with-props.md"},{"status":"R100","path":"docs\/docs\/10.6-update.md","previousPath":"docs\/docs\/09.6-update.md"},{"status":"R100","path":"docs\/docs\/10.7-pure-render-mixin.md","previousPath":"docs\/docs\/09.7-pure-render-mixin.md"},{"status":"R100","path":"docs\/docs\/10.8-perf.md","previousPath":"docs\/docs\/09.8-perf.md"},{"status":"M","path":"docs\/docs\/ref-02-component-api.md"}]}

dillon1000/react

Files changed