javascript - 在运行时读取 CSS 属性值

Question

我有一个像这样初始化的状态变量：

    const App = () => { 
        const [parameters, setParameters] = useState({
            "shape": "circle",
            "fontFamily": "",
            "size": 500
        });

        //...

        // which is here passed to a component
        return(
            <MyCanvas props={parameters} />
        );
    }

该parameters数组由另一个在画布上呈现某些内容的组件使用。我希望参数在应用程序的第一次加载时，在运行时，是当前在 CSS 中定义的，所以我想读取那个 CSS 属性和初始化，在这种情况下，“fontFamily”字段与用 CSS 编写的内容。@font-face {font-family: MyLocalFont;}因此要从 CSS 定义中读取属性。

所以一般来说：我如何在运行时从 CSS 中读取一个值来初始化 useState 变量？

编译时解决方案无法满足我的需求。无需重新部署我的小部件即可更改 CSS 样式，因此我需要在初始化时在运行时读取实际的 CSS 属性值。

标签： javascriptreactjs

Answer 1

import React, { useCallback } from 'react';

const defaultParameters = {
  "shape": "circle",
  "fontFamily": "",
  "size": 500,
}

const App = () => { 
  const [parameters, setParameters] = useState(null);

  const appRoot = useCallback(
    (element) => {
      const style = window.getComputedStyle(element);
      const fontFamily = style.getPropertyValue('font-family');
      setParameters({...defaultParameters, fontFamily });
    }, []
  );

  //...

  return (
    <div ref={appRoot}>
      { parameters && <MyCanvas props={parameters} /> }
    </div>
  );
}