Support passing children as props to a React component (#5886)

withastro · Jan 25, 2023 · 9d4bfc7 · 9d4bfc7
1 parent dabce6b
commit 9d4bfc7
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 5 deletions.
diff --git a/.changeset/fresh-eels-speak.md b/.changeset/fresh-eels-speak.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/react': patch
+---
+
+Support passing `children` as props to a React component
diff --git a/packages/astro/test/fixtures/react-component/src/components/WithChildren.jsx b/packages/astro/test/fixtures/react-component/src/components/WithChildren.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function ({ children }) {
+  return <div className="with-children">{children}</div>;
+}
diff --git a/packages/astro/test/fixtures/react-component/src/pages/index.astro b/packages/astro/test/fixtures/react-component/src/pages/index.astro
@@ -7,6 +7,7 @@ import {Research2} from '../components/Research.jsx';
 import Pure from '../components/Pure.jsx';
 import TypeScriptComponent from '../components/TypeScriptComponent';
 import CloneElement from '../components/CloneElement';
+import WithChildren from '../components/WithChildren';
 
 const someProps = {
   text: 'Hello world!',
@@ -31,5 +32,7 @@ const someProps = {
     <TypeScriptComponent client:load />
     <Pure />
 		<CloneElement />
+		<WithChildren client:load>test</WithChildren>
+		<WithChildren client:load children="test" />
   </body>
 </html>
diff --git a/packages/astro/test/react-component.test.js b/packages/astro/test/react-component.test.js
@@ -42,11 +42,16 @@ describe('React Components', () => {
 			expect($('#pure')).to.have.lengthOf(1);
 
 			// test 8: Check number of islands
-			expect($('astro-island[uid]')).to.have.lengthOf(5);
+			expect($('astro-island[uid]')).to.have.lengthOf(7);
 
 			// test 9: Check island deduplication
 			const uniqueRootUIDs = new Set($('astro-island').map((i, el) => $(el).attr('uid')));
-			expect(uniqueRootUIDs.size).to.equal(4);
+			expect(uniqueRootUIDs.size).to.equal(6);
+
+			// test 10: Should properly render children passed as props
+			const islandsWithChildren = $('.with-children');
+			expect(islandsWithChildren).to.have.lengthOf(2);
+			expect($(islandsWithChildren[0]).html()).to.equal($(islandsWithChildren[1]).html());
 		});
 
 		it('Can load Vue', async () => {

diff --git a/packages/integrations/react/server-v17.js b/packages/integrations/react/server-v17.js
@@ -62,8 +62,11 @@ function renderToStaticMarkup(Component, props, { default: children, ...slotted
 	const newProps = {
 		...props,
 		...slots,
-		children: children != null ? React.createElement(StaticHtml, { value: children }) : undefined,
 	};
+	const newChildren = children ?? props.children;
+	if (newChildren != null) {
+		newProps.children = React.createElement(StaticHtml, { value: newChildren });
+	}
 	const vnode = React.createElement(Component, newProps);
 	let html;
 	if (metadata && metadata.hydrate) {

diff --git a/packages/integrations/react/server.js b/packages/integrations/react/server.js
@@ -69,8 +69,9 @@ async function renderToStaticMarkup(Component, props, { default: children, ...sl
 		...props,
 		...slots,
 	};
-	if (children != null) {
-		newProps.children = React.createElement(StaticHtml, { value: children });
+	const newChildren = children ?? props.children;
+	if (newChildren != null) {
+		newProps.children = React.createElement(StaticHtml, { value: newChildren });
 	}
 	const vnode = React.createElement(Component, newProps);
 	let html;