是否可以在 react js 中将'px'和'vh'组合成 1 个组件的高度

Question

我有几个组件，其中一些组件的大小为 px。 其他的我想要可变的大小。 但是，由于具有固定 px 高度的组件，可变大小的组件不是页面的恒定百分比。 所以我希望一个组件大约是屏幕高度（'80vh'）的 80% 减去另一个组件的高度。 我希望使用类似的东西

style={{height:'80vh-40px'}} 

但这行不通。

我发现这个页面很接近，但我的程序无法识别该计算函数。我是否需要从某个图书馆要求它？

关于如何使这项工作的任何想法？

谢谢！

Answer 1

我在 React.js 组件中使用这样的语法：

<div style={{height: 'calc(100vh - 400px)'}}></div>

它对我有用。

在带有 LESS 预处理器的 CSS 代码中，我使用相同的语法，但不相等：

.right_col {
  height: calc(~"100vh - 400px");
}

在我的实验中，我发现符号"~"在 React.js 组件中不起作用。

Answer 2

解决该问题的一种方法是在组件中使用 style={}。

const styles = {targetDiv: { height: 'calc(100vh - Xpx)'}}

然后。。。

<div style={styles.targetDiv}>
  ...
</div>

Answer 3

注意 - 你可以得到window.innerHeight（参见 http://ryanve.com/lab/dimensions/javascript中的高度和宽度选项），只需在act中自己计算，并以像素为单位设置宽度或高度。

如果你对高度执行此操作，你需要重新计算它是否发生变化

state = {
  windowHeight: window.innerHeight
}
componentWillMount () {
  window.addEventListener('resize', this.handleResize)
}
componentWillUnmount () {
  window.removeEventListener('resize', this.handleResize)
}
handleResize = () => {
  this.setState({ windowHeight: window.innerHeight })
}

在你的div 中

<div style={{height: this.state.windowHeight}} > ... </div>

您不想在任何地方都这样做，但在某些情况下非常方便。 例如 - 在 Android 移动网络上设置 100% 高度，其中 100vh 不起作用，设备按钮会覆盖部分屏幕。