michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
HiDeoo 2023-01-25 23:31:57 +01:00 committed by GitHub
parent dabce6b8c6
commit 9d4bfc76e8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 27 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/fresh-eels-speak.md Normal file
View file

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

5
packages/astro/test/fixtures/react-component/src/components/WithChildren.jsx vendored Normal file
View file

@ -0,0 +1,5 @@
import React from 'react';
export default function ({ children }) {
return <div className="with-children">{children}</div>;
}

3
packages/astro/test/fixtures/react-component/src/pages/index.astro vendored
View file

@ -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>

9
packages/astro/test/react-component.test.js
View file

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

5
packages/integrations/react/server-v17.js
View file

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

5
packages/integrations/react/server.js
View file

@ -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;