使用react-split

Question

我正在尝试使用split.js到react-split，但是在实现更改功能时遇到了麻烦。

我试图将我的代码放入一个Codepen中，但根本无法使其在其中工作。 https://codepen.io/anon/pen/jdeoOb

    <Split direction={this.state.direction} className="App" sizes={[75, 25]}>
      <div className={`split split-${this.state.direction}`}>
      </div>
      <div className={`split split-${this.state.direction}`}>
      </div>
    </Split>

通常使用“方向”属性初始化组件，该属性可以设置为垂直或水平，我将其移入状态并将其应用于组件。

由于需要CSS规则才能进行水平和垂直拆分，因此我还将其应用于每个拆分元素的类

不幸的是，更改方向时，装订线元素的类未更新，此外，尽管也已应用了适当的新宽度或高度，但拆分元素的宽度或高度样式仍与上一个方向相同。

<div id="gutter" class="gutter gutter-vertical" style="height: 10px; width: 10px;"></div>
<div class="split split-horizontal" style="height: calc(37.4697% - 5px); width: calc(37.4697% - 5px);"></div>

我尝试通过添加createGutter函数将状态应用于装订线，如在代码笔中所见，但这也没有得到更新

有什么方法可以不依靠DOM操作来解决这个问题？

任何有关阅读内容的帮助或提示将不胜感激