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

.changeset/fresh-eels-speak.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/react': patch
+---
+
+Support passing `children` as props to a React component

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>;
+}

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>

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 () => {

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) {

packages/integrations/react/server.js

@@ -69,8 +69,9 @@ async function renderToStaticMarkup(Component, props, { default: children, ...sl
 		...props,
 		...slots,
 	};
-	if (children != null) {
+	const newChildren = children ?? props.children;
-		newProps.children = React.createElement(StaticHtml, { value: children });
+	if (newChildren != null) {
+		newProps.children = React.createElement(StaticHtml, { value: newChildren });
 	}
 	const vnode = React.createElement(Component, newProps);
 	let html;