mirror of
https://github.com/react/react.git
synced 2026-10-07 04:10:28 +08:00
104 lines
3.1 KiB
JavaScript
104 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 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.
|
|
};
|
|
|
|
Object.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;
|