mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Sebastian Markbage
8210beeef4
Because the JS community's polyfilling infrastructure sucks and we'll have to fix it for them before we require this. JSX spread uses React.__spread (which might get special behavior for key/ref, not sure yet) This never uses the native implementation and throws for prototype chains. Once the native implementations are faster, we'll start using them.
105 lines
3.1 KiB
JavaScript
105 lines
3.1 KiB
JavaScript
/**
|
|
* Copyright 2013-2014, 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.
|
|
*
|
|
* @providesModule ReactTextComponent
|
|
* @typechecks static-only
|
|
*/
|
|
|
|
"use strict";
|
|
|
|
var DOMPropertyOperations = require('DOMPropertyOperations');
|
|
var ReactComponent = require('ReactComponent');
|
|
var ReactElement = require('ReactElement');
|
|
|
|
var assign = require('Object.assign');
|
|
var escapeTextForBrowser = require('escapeTextForBrowser');
|
|
|
|
/**
|
|
* Text nodes violate a couple assumptions that React makes about components:
|
|
*
|
|
* - When mounting text into the DOM, adjacent text nodes are merged.
|
|
* - Text nodes cannot be assigned a React root ID.
|
|
*
|
|
* This component is used to wrap strings in elements so that they can undergo
|
|
* the same reconciliation that is applied to elements.
|
|
*
|
|
* TODO: Investigate representing React components in the DOM with text nodes.
|
|
*
|
|
* @class ReactTextComponent
|
|
* @extends ReactComponent
|
|
* @internal
|
|
*/
|
|
var ReactTextComponent = function(props) {
|
|
// This constructor and it's argument is currently used by mocks.
|
|
};
|
|
|
|
assign(ReactTextComponent.prototype, ReactComponent.Mixin, {
|
|
|
|
/**
|
|
* Creates the markup for this text node. This node is not intended to have
|
|
* any features besides containing text content.
|
|
*
|
|
* @param {string} rootID DOM ID of the root node.
|
|
* @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
|
|
* @param {number} mountDepth number of components in the owner hierarchy
|
|
* @return {string} Markup for this text node.
|
|
* @internal
|
|
*/
|
|
mountComponent: function(rootID, transaction, mountDepth) {
|
|
ReactComponent.Mixin.mountComponent.call(
|
|
this,
|
|
rootID,
|
|
transaction,
|
|
mountDepth
|
|
);
|
|
|
|
var escapedText = escapeTextForBrowser(this.props);
|
|
|
|
if (transaction.renderToStaticMarkup) {
|
|
// Normally we'd wrap this in a `span` for the reasons stated above, but
|
|
// since this is a situation where React won't take over (static pages),
|
|
// we can simply return the text as it is.
|
|
return escapedText;
|
|
}
|
|
|
|
return (
|
|
'<span ' + DOMPropertyOperations.createMarkupForID(rootID) + '>' +
|
|
escapedText +
|
|
'</span>'
|
|
);
|
|
},
|
|
|
|
/**
|
|
* Updates this component by updating the text content.
|
|
*
|
|
* @param {object} nextComponent Contains the next text content.
|
|
* @param {ReactReconcileTransaction} transaction
|
|
* @internal
|
|
*/
|
|
receiveComponent: function(nextComponent, transaction) {
|
|
var nextProps = nextComponent.props;
|
|
if (nextProps !== this.props) {
|
|
this.props = nextProps;
|
|
ReactComponent.BackendIDOperations.updateTextContentByID(
|
|
this._rootNodeID,
|
|
nextProps
|
|
);
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
var ReactTextComponentFactory = function(text) {
|
|
// Bypass validation and configuration
|
|
return new ReactElement(ReactTextComponent, null, null, null, null, text);
|
|
};
|
|
|
|
ReactTextComponentFactory.type = ReactTextComponent;
|
|
|
|
module.exports = ReactTextComponentFactory;
|