Enable module pattern.

This commit is contained in:
jim
2016-02-11 12:59:25 -08:00
parent 3e41da767f
commit 428ef03bbb
4 changed files with 52 additions and 11 deletions
@@ -44,16 +44,20 @@ function StatelessComponent(Component) {
StatelessComponent.prototype.render = function() {
var Component = ReactInstanceMap.get(this)._currentElement.type;
var element = Component(this.props, this.context, this.updater);
warnIfInvalidElement(Component, element);
return element;
};
function warnIfInvalidElement(Component, element) {
if (__DEV__) {
warning(
element === null || element === false || ReactElement.isValidElement(element),
'%s must be a class extending React.Component or be a stateless ' +
'function that returns a valid React element.',
'%s(...): A valid React element (or null) must be returned. You may have ' +
'returned undefined, an array or some other invalid object.',
Component.displayName || Component.name || 'Component'
);
}
return element;
};
}
/**
* ------------------ The Life-Cycle of a Composite Component ------------------
@@ -168,7 +172,29 @@ var ReactCompositeComponentMixin = {
inst = new Component(publicProps, publicContext, ReactUpdateQueue);
}
} else {
inst = new StatelessComponent(Component);
if (__DEV__) {
ReactCurrentOwner.current = this;
try {
inst = Component(publicProps, publicContext, ReactUpdateQueue);
} finally {
ReactCurrentOwner.current = null;
}
} else {
inst = Component(publicProps, publicContext, ReactUpdateQueue);
}
if (inst == null || inst.render == null) {
renderedElement = inst;
warnIfInvalidElement(Component, renderedElement);
invariant(
inst === null ||
inst === false ||
ReactElement.isValidElement(inst),
'%s(...): A valid React element (or null) must be returned. You may have ' +
'returned undefined, an array or some other invalid object.',
Component.displayName || Component.name || 'Component'
);
inst = new StatelessComponent(Component);
}
}
if (__DEV__) {
@@ -869,7 +895,7 @@ var ReactCompositeComponentMixin = {
// TODO: An `isValidNode` function would probably be more appropriate
renderedComponent === null || renderedComponent === false ||
ReactElement.isValidElement(renderedComponent),
'%s.render(): A valid ReactComponent must be returned. You may have ' +
'%s.render(): A valid React element (or null) must be returned. You may have ' +
'returned undefined, an array or some other invalid object.',
this.getName() || 'ReactCompositeComponent'
);
@@ -72,6 +72,21 @@ describe('ReactCompositeComponent', function() {
spyOn(console, 'error');
});
it('should support module pattern components', function() {
function Child({test}) {
return {
render() {
return <div>{test}</div>;
},
};
}
var el = document.createElement('div');
ReactDOM.render(<Child test="test" />, el);
expect(el.textContent).toBe('test');
});
it('should support rendering to different child types over time', function() {
var instance = <MorphingComponent />;
instance = ReactTestUtils.renderIntoDocument(instance);
@@ -79,7 +79,7 @@ describe('ReactEmptyComponent', function() {
expect(function() {
ReactTestUtils.renderIntoDocument(<Component />);
}).toThrow(
'Component.render(): A valid ReactComponent must be returned. You may ' +
'Component.render(): A valid React element (or null) must be returned. You may ' +
'have returned undefined, an array or some other invalid object.'
);
});
@@ -108,8 +108,8 @@ describe('ReactStatelessComponent', function() {
}).toThrow();
expect(console.error.calls.length).toBe(1);
expect(console.error.argsForCall[0][0]).toContain(
'NotAComponent must be a class extending React.Component or be a stateless ' +
'function that returns a valid React element.'
'NotAComponent(...): A valid React element (or null) must be returned. '+
'You may have returned undefined, an array or some other invalid object.'
);
});
@@ -238,8 +238,8 @@ describe('ReactStatelessComponent', function() {
}).toThrow(); // has no method 'render'
expect(console.error.calls.length).toBe(1);
expect(console.error.argsForCall[0][0]).toContain(
'Warning: NotAComponent must be a class extending React.Component or be a stateless ' +
'function that returns a valid React element.'
'NotAComponent(...): A valid React element (or null) must be returned. You may ' +
'have returned undefined, an array or some other invalid object.'
);
});
});