mirror of
https://github.com/facebook/react.git
synced 2026-02-24 04:33:04 +00:00
87 lines
2.5 KiB
JavaScript
87 lines
2.5 KiB
JavaScript
/**
|
|
* Copyright 2013 Facebook, Inc.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*
|
|
* @providesModule ReactTextComponent
|
|
* @typechecks static-only
|
|
*/
|
|
|
|
"use strict";
|
|
|
|
var ReactComponent = require('ReactComponent');
|
|
var ReactID = require('ReactID');
|
|
|
|
var escapeTextForBrowser = require('escapeTextForBrowser');
|
|
var mixInto = require('mixInto');
|
|
|
|
/**
|
|
* 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(initialText) {
|
|
this.construct({text: initialText});
|
|
};
|
|
|
|
mixInto(ReactTextComponent, ReactComponent.Mixin);
|
|
mixInto(ReactTextComponent, {
|
|
|
|
/**
|
|
* 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.
|
|
* @return {string} Markup for this text node.
|
|
* @internal
|
|
*/
|
|
mountComponent: function(rootID) {
|
|
ReactComponent.Mixin.mountComponent.call(this, rootID);
|
|
return (
|
|
'<span ' + ReactID.ATTR_NAME + '="' + rootID + '">' +
|
|
escapeTextForBrowser(this.props.text) +
|
|
'</span>'
|
|
);
|
|
},
|
|
|
|
/**
|
|
* Updates this component by updating the text content.
|
|
*
|
|
* @param {object} nextProps Contains the next text content.
|
|
* @param {ReactReconcileTransaction} transaction
|
|
* @internal
|
|
*/
|
|
receiveProps: function(nextProps, transaction) {
|
|
if (nextProps.text !== this.props.text) {
|
|
this.props.text = nextProps.text;
|
|
ReactComponent.DOMIDOperations.updateTextContentByID(
|
|
this._rootNodeID,
|
|
nextProps.text
|
|
);
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
module.exports = ReactTextComponent;
|