根据REACTJS中的屏幕大小调整引导列的大小

Question

我正在尝试学习Reactjs并将其与react-bootstrap一起使用。现在我有一个非常简单的模板，有两列。我需要的是根据窗口大小调整这些列的大小。

我已经设法通过添加CSS：window.innerHeight as：

来实现

const styles = {
  container: {

  },
  right: {
    height: window.innerHeight,
    padding: 0,
    margin: 0,
    overflow: 'hidden',
    backgroundColor: 'yellow'
  },
  left: {
    overflowY: '100%',
    padding: 0,
    height: window.innerHeight,
    paddingBottom: '50px',
    backgroundColor: 'white'
  },
  row: {
    marginBottom: 0
  }
}

这样做我想要的如下所示：

但是我不喜欢它，因为我实际上将javascript放在我的CSS中。我宁愿避免这种情况。你有什么建议吗？