小编pol*_*llx的帖子

我是 webpack 的新手，我正在尝试按照本教程https://medium.com/@mushti_dev/hey-e6faa20b910a将自定义字体加载到 stroybook v4 中

工作区结构如下所示（create-react-app + Storybook）

my-project/
  .storybook
     config.js
     preview-hrad.html
     webpack.config.js
  fonts
    MyCustomFont.woff
  src
    components
       Title.js
    containers
    styles
       MyCustomFont.woff
    index.js
  stories

从src中的styles文件夹加载字体时，配置如下：

webpack.config.js

my-project/
  .storybook
     config.js
     preview-hrad.html
     webpack.config.js
  fonts
    MyCustomFont.woff
  src
    components
       Title.js
    containers
    styles
       MyCustomFont.woff
    index.js
  stories

预览-head.html

const path = require('path');

module.exports = async ({ config }) => {
  // fonts
  config.module.rules.push({
    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
    use: [
      {
        loader: 'file-loader',
        query: {
          name: '[name].[ext]',
        }
      }
    ],
    include: path.resolve(__dirname, '../')
  });

  return config;
}; …

我们使用 Cypresscypress-image-snapshot进行快照测试。不幸的是，我们在其他国家/地区运行测试的同事遇到了问题，因为它们因时区不同而失败。在我们的日期相关组件中，我们以 ISO 8601 格式传递字符串来设置日期。

对于我们的笑话测试，我们使用模拟（使用 Date 对象的组件在不同时区产生不同的快照）但不太确定如何处理 Cypress 中的情况。

我找到了一个非常好的 svg 按钮动画示例，但按钮的大小是静态的 - 320px x 60px。我想让按钮响应 - 它是 svg 矩形，但我很难实现这一点。

HTML：

<div class="svg-wrapper">
  <svg class="svg-responsive" viewBox="0 0 320 60" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <rect class="shape" width="100%" height="100%"/>
  </svg>
  <div class="text">HOVER</div>
</div>

CSS：

.svg-wrapper {
  border: 1px solid red;
  position: relative;

  height: 0;
  padding-top: 16.6%;
}
svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.shape {
  width: 100%;
  height: 100%;
  fill: salmon;
  stroke-dasharray: 140 540;
  stroke-dashoffset: -474;
  stroke-width: 8px;
  stroke: #19f6e8;
}

.text { …

我的组件用于useLayoutEffect执行一个函数来计算位置的两个状态变量。相同的函数被传递给内部容器之一的 Element.scroll 事件：

代码如下所示：

export const Component = ({children}) => {
    // .....

    const containerRef = useRef<HTMLDivElement>(null);
    const [canClickLeft, setCanClickLeft] = useState(false);
    const [canClickRight, setCanClickRight] = useState(false);

    const checkForPosition = () => {
      if (containerRef.current) {
        // logic here;

        const positionLeft = false;
        const positionRight = true;
  
        setCanClickLeft(positionLeft);
        setCanClickRight(positionRight);
      }
    };

    const doSomething = () = {....}
  
    useLayoutEffect(() => {
        checkForPosition();
    });


    return (
      <>
        <StyledContainer onScroll={() => checkForPosition()}>
          {children}
        </StyledContainer>
  
        <button disabled={!canClickLeft} onClick={doSomething}>Click Left</button>
        <button disabled={!canClickRight onClick={doSomething}}>Click …