如何渲染组件的子组件而不是整个组件答案

【问题标题】：How to render component's child instead of entire component如何渲染组件的子组件而不是整个组件
【发布时间】：2019-09-19 22:59:01
【问题描述】：

我有一个 react-bnb-gallery 包，其中包含一个名为 ReactBnbGallery 的默认导出组件。它通过门户显示图库并且效果很好，但我的目标是将该图库内联在 html 中并嵌套在组件树中。

目前我拥有的：

<SomeWrapperComponent>
  <ReactBnbGallery />     // contains not accessible <Gallery/> 
<SomeWrapperComponent />

我想要这个：

<SomeWrapperComponent>
  <Gallery/> 
<SomeWrapperComponent />

通过这种方式，我想省略门户并将画廊放在我的布局中。有什么建议吗？？？

我在<ReactBnbGallery> 上考虑了一些 HOC 或者门户网站有一些 api 或其他切换器可以简单地关闭

提前谢谢！

【问题讨论】：

嗨@andrdrx，我正在努力。当新的更改准备就绪时，可以直接呈现组件，而无需包装器。我建议您在github.com/peterpalau/react-bnb-gallery/issues 的图库存储库中将此问题作为问题打开。

标签： reactjs react-component react-portal

【解决方案1】：

Gallery 组件现在可以在门户之外访问。

现在可以使用以下代码：

import { Gallery } from 'react-bnb-gallery';

const MyComponent = () => (
  <Gallery photos={[...]} />
);

如果您还想使用主要的ReactBnbGallery 组件，新方法是执行以下操作：

import { ReactBnbGallery } from 'react-bnb-gallery';

const MyComponent = () => (
  { /* ReactBnbGallery wraps the Gallery component */ }
  <ReactBnbGallery photos={[...]} />
);

更新已在NPM 发布，新版本1.1.7。

【讨论】：