Pass parent tag to text component for SVG

src/browser/ui/ReactDOMComponent.js

@@ -301,7 +301,7 @@ ReactDOMComponent.Mixin = {
         var mountImages = this.mountChildren(
           childrenToUse,
           transaction,
-          context
+          assign({}, context, { _svgTextDecendant: this._tag === 'text' })
         );
         ret = mountImages.join('');
       }
@@ -342,7 +342,11 @@ ReactDOMComponent.Mixin = {
   updateComponent: function(transaction, prevElement, nextElement, context) {
     assertValidProps(this, this._currentElement.props);
     this._updateDOMProperties(prevElement.props, transaction);
-    this._updateDOMChildren(prevElement.props, transaction, context);
+    this._updateDOMChildren(
+      prevElement.props,
+      transaction,
+      assign({}, context, { _svgTextDecendant: this._tag === 'text' })
+    );
   },
 
   /**

src/browser/ui/ReactDOMTextComponent.js

@@ -75,10 +75,13 @@ assign(ReactDOMTextComponent.prototype, {
       return escapedText;
     }
 
+    // SVG <text> elements use <tspan> rather than <span>
+    var tag = context._svgTextDecendant ? 'tspan' : 'span';
+
     return (
-      '<span ' + DOMPropertyOperations.createMarkupForID(rootID) + '>' +
+      '<' + tag + ' ' + DOMPropertyOperations.createMarkupForID(rootID) + '>' +
         escapedText +
-      '</span>'
+      '</' + tag + '>'
     );
   },
 

src/browser/ui/dom/components/__tests__/ReactSVGText-test.js

@@ -0,0 +1,52 @@
+/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+/*jshint evil:true */
+
+describe('ReactSVGText', function() {
+  var React;
+  var ReactTestUtils;
+
+  beforeEach(function() {
+    React = require('React');
+    ReactTestUtils = require('ReactTestUtils');
+  });
+
+  it ('should allow multiple children in text components', function() {
+    var Text = React.createClass({
+      getDefaultProps() {
+        return {
+          first: 'first',
+          second: 'second'
+        }
+      },
+      render: function() {
+        return (
+          <svg>
+            <text ref="label">
+              { this.props.first } { this.props.second }
+            </text>
+          </svg>
+        )
+      }
+    });
+
+    var test     = ReactTestUtils.renderIntoDocument(<Text />);
+    var label    = test.refs.label.getDOMNode();
+    var children = label.querySelectorAll('tspan');
+
+    expect(label.textContent).toEqual('first second');
+    expect(children[0].tagName).toEqual('tspan');
+  });
+
+});