如何在react渲染中使用calc css函数

在 React 中使用 calc() CSS 函数与在普通 HTML/CSS 中使用它是类似的。你可以在 JSX 中直接使用 calc() 函数来计算 CSS 属性的值。以下是一些示例，展示了如何在 React 组件中使用 calc() 函数。

示例一：内联样式

如果你使用内联样式，可以将 calc() 函数作为字符串传递给样式属性。

import React from 'react';

const MyComponent = () => {
  const style = {
    width: 'calc(100% - 50px)',
    height: 'calc(100vh - 100px)',
    backgroundColor: 'lightblue'
  };

  return (
    <div style={style}>
      This div uses calc() for its width and height.
    </div>
  );
};

export default MyComponent;

示例二：使用 CSS 类

你也可以在外部 CSS 文件中使用 calc() 函数，然后在 React 组件中引用该 CSS 类。

styles.css

.my-div {
  width: calc(100% - 50px);
  height: calc(100vh - 100px);
  background-color: lightblue;
}

MyComponent.jsx

import React from 'react';
import './styles.css';

const MyComponent = () => {
  return (
    <div className="my-div">
      This div uses calc() for its width and height.
    </div>
  );
};

export default MyComponent;

示例三：动态计算

如果你需要动态计算某些值，可以在 JavaScript 中计算这些值，然后将结果传递给内联样式。

import React from 'react';

const MyComponent = () => {
  const containerWidth = 100; // Example value, you can calculate this dynamically
  const containerHeight = 200; // Example value, you can calculate this dynamically

  const style = {
    width: `calc(100% - ${containerWidth}px)`,
    height: `calc(100vh - ${containerHeight}px)`,
    backgroundColor: 'lightblue'
  };

  return (
    <div style={style}>
      This div uses calc() for its width and height.
    </div>
  );
};

export default MyComponent;