使占位符加载响应

Question

我使用create-content-loader包创建占位符加载，但不能使它响应。如何使svg填充父内容。我不想设置宽度硬编码1060 to。我也尝试过使用viewbox属性。

   <ContentLoader
      height={40}
      width={1060}
      speed={2}
      primaryColor="#d9d9d9"
      secondaryColor="#ecebeb"
    >
      <rect x="10" y="40" rx="0" ry="0" width="75" height="10" />
      <rect x="10" y="60" rx="0" ry="0" width="75" height="10" />
      <rect x="10" y="100" rx="0" ry="0" width="75" height="10" />
      <rect x="10" y="80" rx="0" ry="0" width="75" height="10" />
      <rect x="10" y="120" rx="0" ry="0" width="75" height="10" />
      <rect x="110" y="40" rx="0" ry="0" width="370" height="125" />
      <rect x="275" y="63" rx="0" ry="0" width="72" height="4" />
      <rect x="430" y="5" rx="5" ry="5" width="75" height="20" />
      <rect x="110" y="10" rx="0" ry="0" width="200" height="15" />
      <rect x="10" y="5" rx="4" ry="4" width="75" height="20" />
      <circle cx="493" cy="54" r="2" />
      <circle cx="497" cy="47" r="7" />
      <circle cx="497" cy="77" r="7" />
      <circle cx="497" cy="107" r="7" />
    </ContentLoader>```

Answer 1

ContentLoader使用html5 canvas进行呈现，因此viewbox无法工作。我要做的是：

1. 将ref添加到容器元素(包含ContentLoader)。
2. 使用ref获取元素宽度
3. 将该值传递给ContentLoader宽度支柱。

请记住，在第一次呈现时，ref.current将是null或undefined

更新：

此外，您可以尝试从创建-内容加载器示例中提取svg并将其转换为您的组件。只需更改svg属性，以匹配与rect相关的svg道具。而不是将svg上的css类设置为具有以下属性：

.responsive-svg {
  width: 100%;
  height: auto;
}

Svg (在将其转换为react组件之前)可能如下所示：

<svg
  role="img"
  width="400"
  height="160"
  aria-labelledby="loading-aria"
  viewBox="0 0 400 160"
  preserveAspectRatio="none"
>
  <title id="loading-aria">Loading...</title>
  <rect
    x="0"
    y="0"
    width="100%"
    height="100%"
    clip-path="url(#clip-path)"
    style='fill: url("#fill");'
  ></rect>
  <defs>
    <clipPath id="clip-path">
        <rect x="48" y="8" rx="3" ry="3" width="88" height="6" /> 
        <rect x="48" y="26" rx="3" ry="3" width="52" height="6" /> 
        <rect x="0" y="56" rx="3" ry="3" width="410" height="6" /> 
        <rect x="0" y="72" rx="3" ry="3" width="380" height="6" /> 
        <rect x="0" y="88" rx="3" ry="3" width="178" height="6" /> 
        <circle cx="20" cy="20" r="20" />
    </clipPath>
    <linearGradient id="fill">
      <stop
        offset="0.599964"
        stop-color="#f3f3f3"
        stop-opacity="1"
      >
        <animate
          attributeName="offset"
          values="-2; -2; 1"
          keyTimes="0; 0.25; 1"
          dur="2s"
          repeatCount="indefinite"
        ></animate>
      </stop>
      <stop
        offset="1.59996"
        stop-color="#ecebeb"
        stop-opacity="1"
      >
        <animate
          attributeName="offset"
          values="-1; -1; 2"
          keyTimes="0; 0.25; 1"
          dur="2s"
          repeatCount="indefinite"
        ></animate>
      </stop>
      <stop
        offset="2.59996"
        stop-color="#f3f3f3"
        stop-opacity="1"
      >
        <animate
          attributeName="offset"
          values="0; 0; 3"
          keyTimes="0; 0.25; 1"
          dur="2s"
          repeatCount="indefinite"
        ></animate>
      </stop>
    </linearGradient>
  </defs>
</svg>