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.

Sign up for GitHub

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

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

Show file tree
Hide file tree
Changes from 8 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
4 changes: 2 additions & 2 deletions src/renderers/dom/ReactDOMStringRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ var ReactPartialRenderer = require('ReactPartialRenderer');
*/
function renderToString(element) {
invariant(
React.isValidElement(element),
Array.isArray(element) || React.isValidElement(element),
Copy link
Collaborator

Choose a reason for hiding this comment

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

I'm not sure this is sufficient. For example it could be a nested array. Conversely, it could be an array of invalid things (e.g. array of objects), and we'd want to throw in that case.

I think the validation should be moved to a further stage at the point where we actually process the next frame. Which is the same strategy we do with Fiber. This way we don’t do validation immediately, but we throw if we meet something invalid.

Copy link
Contributor Author

@evilbs evilbs Jul 21, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

I'm not sure this is sufficient. For example it could be a nested array. Conversely, it could be an array of invalid things (e.g. array of objects), and we'd want to throw in that case.

I think here can use 'React.Children.toArray' method to deal with this situation.

  1. nested array: Will flatten the array.
    [[<Hello />,<Dan />],<Cool />] => [<Hello />,<Dan />,<Cool />]
  2. array of objects: Will throw when passed object does not have an iterator.

I think the validation should be moved to a further stage at the point where we actually process the next frame. Which is the same strategy we do with Fiber. This way we don’t do validation immediately, but we throw if we meet something invalid.

if disableNewFiberFeatures=false then don't do validation immediately.

'renderToString(): You must pass a valid ReactElement.',
);
var renderer = new ReactPartialRenderer(element, false);
Expand All @@ -37,7 +37,7 @@ function renderToString(element) {
*/
function renderToStaticMarkup(element) {
invariant(
React.isValidElement(element),
Array.isArray(element) || React.isValidElement(element),
'renderToStaticMarkup(): You must pass a valid ReactElement.',
);
var renderer = new ReactPartialRenderer(element, true);
Expand Down
16 changes: 16 additions & 0 deletions src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,6 +328,22 @@ describe('ReactDOMServerIntegration', () => {
expect(e.childNodes.length).toBe(1);
expect(e.firstChild.tagName).toBe('BR');
});

if (ReactDOMFeatureFlags.useFiber) {
it('a array type children as a child', () => {
spyOn(console, 'error');
let markup = ReactDOMServer.renderToString([
<div key={1}>text1</div>,
<p key={2}>text2</p>,
]);

const root = document.createElement('div');
root.innerHTML = markup;
expect(root.childNodes[0].tagName).toBe('DIV');
expect(root.childNodes[1].tagName).toBe('P');
expectDev(console.error.calls.count()).toBe(0);
});
}
});

describe('property to attribute mapping', function() {
Expand Down
17 changes: 14 additions & 3 deletions src/renderers/shared/server/ReactPartialRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -307,8 +307,6 @@ function createOpenTagMarkup(
}

function resolve(child, context) {
// TODO: We'll need to support Arrays (and strings) after Fiber is rolled out
invariant(!Array.isArray(child), 'Did not expect to receive an Array child');
while (React.isValidElement(child)) {
if (__DEV__) {
pushElementToDebugStack(child);
Expand Down Expand Up @@ -416,7 +414,7 @@ function resolve(child, context) {
class ReactDOMServerRenderer {
constructor(element, makeStaticMarkup) {
var topFrame = {
children: [element],
children: Array.isArray() ? element : [element],
childIndex: 0,
context: emptyObject,
footer: '',
Expand Down Expand Up @@ -484,6 +482,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 •
edited
Loading

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 •
edited
Loading

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