需要从“react-reflex”库中包装“ReflexSplitter”组件

Question

首先，我必须说这是一个很棒的库，我将使用这个库在我正在构建的自定义 UI 库中创建

<SplitterContainer />

、

<SplitterElement />

和

<SplitterControl />

组件，然后这些组件将由组织中的开发人员使用。

我能够成功包装

ReflexContainer

和

ReflexElement

组件，但我发现包装

ReflexSplitter

组件存在挑战。正如我在一些已解决的问题中看到的，有一个

element.type

检查来检查组件是否为

ReflexSplitter

。因此，

ReflexSplitter

一定是直接子代。

就我而言，我想自定义拆分器，如下所示，并将其作为我的库中的组件提供。

现在我发现可以这样做

<ReflexSplitter>
  <InnerSplitter />
</ReflexSplitter>

但这需要是一个可重复使用的组件，即

<SplitterControl />

。

我目前面临的挑战

我有两个

<SplitterElement/ >

，理想情况下，它们的 flex 属性应该是

flex: 0.5 1 0%

，但我得到的是

flex: 0.3333 1 0%

。这意味着包装器

<SplitterControl />

组件被视为一个单独的元素。

我该如何解决这个问题？

相同的沙箱 https://codesandbox.io/p/sandbox/gallant-borg-49mxty

Answer 1

无法包装

<ReflexSplitter />

组件。唯一的解决方案是通过不同的名称从应用程序中公开该组件，并在其中包含一个子组件

<ReflexSplitter />

。

export { ReflexSplitter as SplitterControl } from 'react-reflex';

<SplitterControl>
  <SplitterButtons />
</SplitterControl>