使占位符加载响应

Question

我正在使用create-content-loader包创建占位符加载，但无法使其响应。如何使svg填充父级内容。我不想将宽度硬编码为1060px。我也尝试过使用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

更新：

此外，您也可以尝试从create-content-loader example中提取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>