Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix renderToString fails with array type children when react-dom/server render #10221

Merged
merged 27 commits into from
Jul 31, 2017
Merged
Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
790e65a
fix(*): fix renderToString fails with array type children when react-…
evilbs Jul 19, 2017
c2aeb06
Merge remote-tracking branch 'upstream/master'
evilbs Jul 20, 2017
6fd78e5
Add an integration test that verify renderToString with array type ch…
evilbs Jul 20, 2017
4b28bc1
Add integration test to renderToString with array type child
Jul 20, 2017
f652ed7
Add integration test to renderToString with array type child
Jul 20, 2017
322fa40
Merge remote-tracking branch 'origin/master'
Jul 20, 2017
deb11af
Update integration test to renderToString with array type child
Jul 20, 2017
62c042e
fix renderToString fails with array type children when react-dom/serv…
Jul 20, 2017
6b4eb0e
Update integration test to renderToString with array type child
Jul 21, 2017
e53e552
Add to iterate that are not arrays
Jul 21, 2017
eafb4bd
Add the validation react element
Jul 21, 2017
3df964d
Improve an integration test of server renderToString with array type
Jul 22, 2017
6f7f142
Merge branch 'master' of https://github.com/facebook/react
Jul 22, 2017
02101d5
prettier
Jul 22, 2017
d661c5a
Merge branch 'master' of https://github.com/facebook/react
Jul 25, 2017
97575fd
Merge branch 'master' into master
evilbs Jul 27, 2017
e0bd356
Remove array validate
Jul 28, 2017
1d45bae
Merge branch 'master' of https://github.com/gzhappysky/react
Jul 28, 2017
5f8a2dd
prettier
Jul 28, 2017
cf005dd
Make SSR can handle a single array element and nested array
Jul 29, 2017
7f5c0a1
prettier
Jul 29, 2017
60e7e3e
Change integeration test description
Jul 29, 2017
e4dd558
modified: src/renderers/dom/ReactDOMNodeStreamRenderer.js
Jul 31, 2017
59e0843
Make invariants consistent
gaearon Jul 31, 2017
5539f09
Gate outdated test itself by feature flag
gaearon Jul 31, 2017
06d9971
Change test to make sense both with old and new code
gaearon Jul 31, 2017
b42dd08
Test more cases
gaearon Jul 31, 2017
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ let ReactDOM;
let ReactDOMServer;
let ReactDOMNodeStream;
let ReactTestUtils;
let ReactFeatureFlags;

const stream = require('stream');

Expand Down Expand Up @@ -288,6 +289,8 @@ function expectMarkupMismatch(serverElement, clientElement) {
let onAfterResetModules = null;
function resetModules() {
jest.resetModuleRegistry();
ReactFeatureFlags = require('ReactFeatureFlags');
ReactFeatureFlags.disableNewFiberFeatures = false;
PropTypes = require('prop-types');
React = require('react');
ReactDOM = require('react-dom');
Expand Down Expand Up @@ -328,6 +331,20 @@ describe('ReactDOMServerIntegration', () => {
expect(e.childNodes.length).toBe(1);
expect(e.firstChild.tagName).toBe('BR');
});

if (ReactDOMFeatureFlags.useFiber) {
itRenders('a array type children as a child', async render => {
class AppComponent extends React.Component {
render() {
return [<div key={1}>text1</div>, <div key={2}>text2</div>];
}
}
const e = await render(<AppComponent />);
const parentNode = e.parentNode;
expect(parentNode.childNodes[0].tagName).toBe('DIV');
expect(parentNode.childNodes[1].tagName).toBe('DIV');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's render two different types? e.g. [<div key="1" />, <p key="2" />].

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, good idea.

});
}
});

describe('property to attribute mapping', function() {
Expand Down
13 changes: 13 additions & 0 deletions src/renderers/shared/server/ReactPartialRenderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -484,6 +484,19 @@ class ReactDOMServerRenderer {
if (child === null || child === false) {
return '';
} else {
if (Array.isArray(child)) {
var frame = {
children: child,
childIndex: 0,
context: context,
footer: '',
};
if (__DEV__) {
frame.debugElementStack = [];
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to do this? (Note: I'm not very familiar with this code so I'm learning it too.)

Copy link
Contributor Author

@evilbs evilbs Jul 20, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"setCurrentDebugStack" method will set debugElementStack.length = 1, This is to init the debugElementStack array. The same method handles when HostCompoment return array type children.https://github.com/facebook/react/blob/master/src/renderers/shared/server/ReactPartialRenderer.js#L769

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do warnings still work? You can add a test similar to this one but using an array.

Copy link
Contributor Author

@evilbs evilbs Jul 20, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gaearo, It's done. Please review.

}
this.stack.push(frame);
return '';
}
return this.renderDOM(child, context);
}
}
Expand Down