Question

我目前正在构建一个React组件，以在我的应用中显示星级。

当前正在运行。但是以某种方式，我只能通过将SVG元素封装在<span>标记中来使其工作，这让我有些烦恼。它在代码中引入了另一个容器和尺寸，这使我在这种情况下更难推理CSS尺寸。

我将styled-components用于CSS。

这是渲染“星星”组件的方式：

App.js

<Stars stars={3.4} />;

Stars.js

import React from "react";
import styled from "styled-components";
import IconStar from "./IconStar";

const S = {};

S.WrapperDiv = styled.div`
  display: flex;
  align-items: center;
`;

S.RatingSpan = styled.span`
  font-size: 1.8rem;
  font-weight: 700;
  padding-right: 5px;
  line-height: 1.8rem;
  font-family: Helvetica, Arial;
`;

S.BackStarsDiv = styled.div`
  display: flex;
  position: relative;
  color: #d3d3d3;
`;

S.FrontDiv = styled.div`
  display: flex;
  position: absolute;
  top: 0;
  overflow: hidden;
  width: ${props => props.rating};
  color: #ffbc0b;
`;

function Stars(props) {
  let rating = 0;

  /* This is to round the rating to closest .5 or .0 */
  if (props.stars) {
    rating =
      (((Math.round((props.stars * 10) / 5) * 5) / 10) * 20).toString() + "%";
  }

  return (
    <React.Fragment>
      <S.WrapperDiv>
        <S.RatingSpan>{props.stars || "N/A"}</S.RatingSpan>
        <S.BackStarsDiv>
          <IconStar />
          <IconStar />
          <IconStar />
          <IconStar />
          <IconStar />
          <S.FrontDiv rating={rating}>
            <IconStar />
            <IconStar />
            <IconStar />
            <IconStar />
            <IconStar />
          </S.FrontDiv>
        </S.BackStarsDiv>
      </S.WrapperDiv>
    </React.Fragment>
  );
}

export default Stars;

IconStar.js

import React from "react";
import styled from "styled-components";

const S = {};

S.span = styled.span`
  width: 1.8rem;
  height: 1.8rem;
`;

S.svg = styled.svg`
  /* display: inline-block;
  vertical-align: middle; */
`;

function IconStar(props) {
  return (
    <S.span>
      <S.svg
        viewBox="0 0 1000 1000"
        width="1.8rem"
        height="1.8rem"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M10,394.5c0-14.8,10.9-23.9,32.7-27.4l295.4-42.2L471,56.9c7.7-16.2,17.2-24.3,28.5-24.3s21.1,8.1,29.5,24.3l131.9,267.9l295.4,42.2c22.5,3.5,33.8,12.7,33.8,27.4c0,8.4-5.3,17.9-15.8,28.5L760,630.8l50.6,294.3c0.7,2.8,1.1,7,1.1,12.7c0,7.7-2.1,14.4-6.3,20c-4.2,5.6-10.2,8.8-17.9,9.5c-7,0-14.8-2.5-23.2-7.4L499.5,820.7L235.7,959.9c-9.1,4.9-17.2,7.4-24.3,7.4c-7.7,0-13.7-3.2-17.9-9.5c-4.2-6.3-6.3-13-6.3-20c0-2.8,0.4-7,1.1-12.7l50.6-294.3L24.8,423C14.9,412.4,10,402.9,10,394.5L10,394.5z"
        />
      </S.svg>
    </S.span>
  );
}

export default IconStar;

问题

是否有一种方法可以摆脱<span>的{{1}}元素，使其直接与SVG元素一起使用？不知道为什么，但是当我删除它时，它破坏了我的CSS。

这是Code Sandbox和我当前正在使用的组件。

Answer 1

因为删除svg元素时span正在缩小。为防止这种情况，只需将flex-shrink: 0;添加到您的svg。

https://codesandbox.io/s/rn14mq2ko

Answer 2

我将删除strToReplace = strToReplace.replace(/{G}/, '<img src="/images/Mana_G.png">');和<span>上的宽度。问题似乎是您在两个位置上定义了元素的宽度。当您将其放在跨度上时，它将覆盖父样式。

https://jsfiddle.net/649y20s3/

使用flexbox和svg（与Sandbox一起）对星级评分组件进行反应

2 个答案: