{"commit":{"authorName":"Pete Hunt","revision":"4cbc4b58f6c10a2557b0da4dc519c932f167efe3","authorEmail":"pete@instagram.com","subject":"Support `children` and `ref` for `cloneWithProps()`","authoredAt":"2014-01-30T14:50:34-08:00","shortRevision":"4cbc4b58f6"},"body":"We're not handling these correctly.","parents":["b225b34f91ab7e0c94c46ab19a4d8f815c3e99fa"],"files":[{"path":"src\/core\/ReactPropTransferer.js","status":"M"},{"path":"src\/utils\/__tests__\/cloneWithProps-test.js","status":"M"},{"path":"src\/utils\/cloneWithProps.js","status":"M"}],"patch":"diff --git a\/src\/core\/ReactPropTransferer.js b\/src\/core\/ReactPropTransferer.js\nindex ed721a3c9b..77d83da6a2 100644\n--- a\/src\/core\/ReactPropTransferer.js\n+++ b\/src\/core\/ReactPropTransferer.js\n@@ -42,6 +42,8 @@ function createTransferStrategy(mergeStrategy) {\n \n \/**\n * Transfer strategies dictate how props are transferred by `transferPropsTo`.\n+ * NOTE: if you add any more exceptions to this list you should be sure to\n+ * update `cloneWithProps()` accordingly.\n *\/\n var TransferStrategies = {\n \/**\ndiff --git a\/src\/utils\/__tests__\/cloneWithProps-test.js b\/src\/utils\/__tests__\/cloneWithProps-test.js\nindex 774b61de1e..b5aba846ae 100644\n--- a\/src\/utils\/__tests__\/cloneWithProps-test.js\n+++ b\/src\/utils\/__tests__\/cloneWithProps-test.js\n@@ -126,4 +126,56 @@ describe('cloneWithProps', function() {\n cloneWithProps(, {key: 'xyz'})\n );\n });\n+\n+ it('should transfer children', function() {\n+ var Component = React.createClass({\n+ render: function() {\n+ expect(this.props.children).toBe('xyz');\n+ return

;\n+ }\n+ });\n+\n+ ReactTestUtils.renderIntoDocument(\n+ cloneWithProps(, {children: 'xyz'})\n+ );\n+ });\n+\n+ it('should shallow clone children', function() {\n+ var Component = React.createClass({\n+ render: function() {\n+ expect(this.props.children).toBe('xyz');\n+ return

;\n+ }\n+ });\n+\n+ ReactTestUtils.renderIntoDocument(\n+ cloneWithProps(xyz<\/Component>, {})\n+ );\n+ });\n+\n+ it('should support keys and refs', function() {\n+ var Component = React.createClass({\n+ render: function() {\n+ expect(this.props.key).toBe('xyz');\n+ expect(this.props.ref).toBe('xyz');\n+ return

;\n+ }\n+ });\n+\n+ var Parent = React.createClass({\n+ render: function() {\n+ var clone =\n+ cloneWithProps(this.props.children, {key: 'xyz', ref: 'xyz'});\n+ return

{clone}<\/div>;\n+ }\n+ });\n+\n+ var Grandparent = React.createClass({\n+ render: function() {\n+ return <\/Parent>;\n+ }\n+ });\n+\n+ ReactTestUtils.renderIntoDocument();\n+ });\n });\ndiff --git a\/src\/utils\/cloneWithProps.js b\/src\/utils\/cloneWithProps.js\nindex 28c3b4540d..310dd08672 100644\n--- a\/src\/utils\/cloneWithProps.js\n+++ b\/src\/utils\/cloneWithProps.js\n@@ -21,6 +21,14 @@\n \n var ReactPropTransferer = require('ReactPropTransferer');\n \n+var keyMirror = require('keyMirror');\n+\n+var SpecialPropsToTransfer = keyMirror({\n+ key: null,\n+ children: null,\n+ ref: null\n+});\n+\n \/**\n * Sometimes you want to change the props of a child passed to you. Usually\n * this is to add a CSS class.\n@@ -42,10 +50,27 @@ function cloneWithProps(child, props) {\n }\n \n var newProps = ReactPropTransferer.mergeProps(child.props, props);\n- \/\/ ReactPropTransferer does not transfer the `key` prop so do it manually.\n- if (props.key) {\n+\n+ \/\/ ReactPropTransferer does not transfer the `key` prop so do it manually. Do\n+ \/\/ not transfer it from the original component.\n+ if (props.hasOwnProperty(SpecialPropsToTransfer.key)) {\n newProps.key = props.key;\n }\n+\n+ \/\/ ReactPropTransferer does not transfer the `children` prop. Transfer it\n+ \/\/ from `props` if it exists, otherwise use `child.props.children` if it is\n+ \/\/ provided.\n+ if (props.hasOwnProperty(SpecialPropsToTransfer.children)) {\n+ newProps.children = props.children;\n+ } else if (child.props.hasOwnProperty(SpecialPropsToTransfer.children)) {\n+ newProps.children = child.props.children;\n+ }\n+\n+ \/\/ ReactPropTransferer does not transfer `ref` so do it manually.\n+ if (props.hasOwnProperty(SpecialPropsToTransfer.ref)) {\n+ newProps.ref = props.ref;\n+ }\n+\n return child.constructor.ConvenienceConstructor(newProps);\n }\n \n"}

dillon1000/react

Files changed