diff --git a/src/core/ReactDOMComponent.js b/src/core/ReactDOMComponent.js index 1c37a33cc3dba..3901286f0e271 100644 --- a/src/core/ReactDOMComponent.js +++ b/src/core/ReactDOMComponent.js @@ -104,6 +104,25 @@ ReactDOMComponent.Mixin = { } ), + _processDatasetAttribute: function(props) { + if (props.dataset && typeof props.dataset === 'object') { + var datasetProps = Object.keys(props.dataset), + datasetPropName, + datasetPropValue; + + for (var i = 0, l = datasetProps.length; i < l; i++) { + datasetPropName = datasetProps[i]; + datasetPropValue = props.dataset[datasetPropName]; + if (typeof datasetPropValue === "function") { + datasetPropValue = datasetPropValue.call(this); + } + props['data-' + datasetPropName] = datasetPropValue; + } + + props.dataset = null; + } + }, + /** * Creates markup for the open tag and all attributes. * @@ -118,7 +137,7 @@ ReactDOMComponent.Mixin = { _createOpenTagMarkup: function() { var props = this.props; var ret = this._tagOpen; - + this._processDatasetAttribute(props); for (var propKey in props) { if (!props.hasOwnProperty(propKey)) { continue; @@ -222,6 +241,7 @@ ReactDOMComponent.Mixin = { var propKey; var styleName; var styleUpdates; + this._processDatasetAttribute(nextProps); for (propKey in lastProps) { if (nextProps.hasOwnProperty(propKey) || !lastProps.hasOwnProperty(propKey)) { diff --git a/src/core/__tests__/ReactDOMComponent-test.js b/src/core/__tests__/ReactDOMComponent-test.js index 247257d66233a..4b2e24c7d8b68 100644 --- a/src/core/__tests__/ReactDOMComponent-test.js +++ b/src/core/__tests__/ReactDOMComponent-test.js @@ -49,6 +49,28 @@ describe('ReactDOMComponent', function() { expect(stub.getDOMNode().className).toEqual(''); }); + it("should handle data = {object}", function() { + var testObject = { + a: "a", + b: function() { + return "b"; + } + }; + var stub = ReactTestUtils.renderIntoDocument(
); + var domNode = stub.getDOMNode(); + expect(domNode.dataset.a).toEqual('a'); + expect(domNode.dataset.b).toEqual('b'); + testObject = { + a: function() { + return 1; + }, + b: "2" + }; + stub.receiveProps({dataset: testObject}); + expect(domNode.dataset.a).toEqual("1"); + expect(domNode.dataset.b).toEqual("2"); + }); + it("should gracefully handle various style value types", function() { var stub = ReactTestUtils.renderIntoDocument(
); var stubStyle = stub.getDOMNode().style;