likes
comments
collection
share

“实战讲解：如何使用React设计一个评分组件”

作者站长头像
站长
· 阅读数 22

前言

在上一篇文章中，我已经分享了一些组件的设计原则，但理论怎么能没有实践呢？古话说得好，纸上得来终觉浅，绝知此事要躬行。因此，今天我将依这些原则设计一个简单的评分组件，如下图所示。

“实战讲解：如何使用React设计一个评分组件”

基本功能与逻辑

模板实现

首先，我们需要分析功能。当悬停在空星上时，这颗星星以及之前的星星都会变成实星，并且旁边的数字也会随之改变；点击某颗星后，对应的星星及其之前的星星变为实星，数字更新。

为实现这些功能，我们可以用两个 state 来控制：一个是临时星星数，一个是实际星星数。悬停改变临时星星数，点击确定实际星星数。

const starStyle = {
  width: "48px",
  height: "48px",
  display: "block",
  cursor: "pointer",
};

const containerStyle = {
  display: "flex",
  alignItems: "center",
  gap: "16px",
};

const starContainerStyle = {
  display: "flex",
};

const textStyle = {
  lineHeight: "1",
  margin: "0",
};

export default function StarRating() {
  const [rating, setRating] = useState(0);
  const [tempRating, setTempRating] = useState(0);

  return (
    <div style={containerStyle}>
      <div style={starContainerStyle}>
        {Array.from({ length: 5 }, (_, i) => (
          <Star key={i} />
        ))}
      </div>
      <p style={textStyle}>{tempRating || rating || ""}</p>
    </div>
  );
}

function Star() {
  return (
    <span role="button" style={starStyle}>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="#000"
        stroke="#000"
      >
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
      </svg>
    </span>
  );
}

事件交互处理

接下来的代码为了不占过多篇幅，只展示有变动的代码

交互事件包括悬停控制临时星星数和点击确定星星数。首先处理点击事件：

export default function StarRating() {
  function handleRating(rating) {
    setRating(rating);
  }

  return (
    ...
      <Star key={i} onRate={() => handleRating(i + 1)} />
    ...
  );
}

function Star ({ onRate }) {
  ...
  <span role="button" style={starStyle} onClick={onRate}>
  ...
}

接着处理悬停事件，分别使用 onMouseEnter 和 onMouseLeave 事件来控制：

export default function StarRating() {
  ...
      <Star
        key={i}
        onRate={() => handleRating(i + 1)}
        onHoverIn={() => setTempRating(i + 1)}
        onHoverOut={() => setTempRating(0)}
      />
  ...
}

function Star({ onRate, onHoverIn, onHoverOut }) {
  ...
    <span
      role="button"
      style={starStyle}
      onClick={onRate}
      onMouseEnter={onHoverIn}
      onMouseLeave={onHoverOut}
    >
  ...
}

接下来，实现实星与空星的渲染。通过传入一个 full 的布尔值给 Star 组件，判断 tempRating 或 rating 的值是否大于等于当前星星的索引。

export default function StarRating() {
  ...
      <Star
        key={i}
        onRate={() => handleRating(i + 1)}
        onHoverIn={() => setTempRating(i + 1)}
        onHoverOut={() => setTempRating(0)}
        full={tempRating ? tempRating >= i + 1 : rating >= i + 1}
      />
  ...
}

function Star({ onRate, full, onHoverIn, onHoverOut }) {
  ...
    <span
      ...
    >
      {full ? (
        ... // 实星svg，如开篇代码
      ) : (
        // 空星svg
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="#000"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="{2}"
            d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
          />
        </svg>
      )}
    </span>
  ...

至此，主要功能已实现。接下来，将组件的实用性、复用性提升，以便自己或他人使用。

props 作为 API

为了提高组件的实用性和可复用性，我们可以将星星颜色、星星大小、总体星星数量、默认星星数、自定义样式及返回实际星星数等作为配置选项暴露。

PropTypes: 如果你希望你的组件可以在多个程序中高度可重用，并且你不想切换为TypeScript，那么你可以使用这个方法来为你的props确定类型，就像下面代码中的那样。

以下是全部代码，展示是如何通过 props 来配置这些选项，并将 style 变量移入组件内，以确保在组件重加载时样式也能重新加载。

const containerStyle = {
  display: "flex",
  alignItems: "center",
  gap: "16px",
};

const starContainerStyle = {
  display: "flex",
};

StarRating.prototype = {
  maxRating: PropTypes.number,
  defaultRating: PropTypes.number,
  color: PropTypes.string,
  size: PropTypes.number,
  messages: PropTypes.array,
  className: PropTypes.string,
  onSetRating: PropTypes.func,
};

export default function StarRating({
  maxRating = 5,
  color = "#fcc419",
  size = 48,
  className = "",
  messages = [],
  defaultRating = 0,
  onSetRating = () => {},
}) {
  const [rating, setRating] = useState(defaultRating);
  const [tempRating, setTempRating] = useState(0);

  const textStyle = {
    lineHeight: "1",
    margin: "0",
    color,
    fontSize: `${size / 1.5}px`,
  };

  function handleRating(rating) {
    setRating(rating);
    onSetRating(rating);
  }

  return (
    <div style={containerStyle} className={className}>
      <div style={starContainerStyle}>
        {Array.from({ length: maxRating }, (_, i) => (
          <Star
            key={i}
            onRate={() => handleRating(i + 1)}
            onHoverIn={() => setTempRating(i + 1)}
            onHoverOut={() => setTempRating(0)}
            full={tempRating ? tempRating >= i + 1 : rating >= i + 1}
            color={color}
            size={size}
          />
        ))}
      </div>
      <p style={textStyle}>
        {messages.length === maxRating
          ? messages[tempRating ? tempRating - 1 : rating - 1]
          : tempRating || rating || ""}
      </p>
    </div>
  );
}

function Star({ onRate, full, onHoverIn, onHoverOut, size, color }) {
  const starStyle = {
    width: `${size}px`,
    height: `${size}px`,
    display: "block",
    cursor: "pointer",
  };

  return (
    <span
      role="button"
      style={starStyle}
      onClick={onRate}
      onMouseEnter={onHoverIn}
      onMouseLeave={onHoverOut}
    >
      {full ? (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill={color}
          stroke={color}
        >
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
        </svg>
      ) : (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke={color}
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="{2}"
            d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
          />
        </svg>
      )}
    </span>
  );
}

调用示例

可以用来在其它组件或页面中引用 StarRating 组件，并根据��要传入相应的 props。

function App() {
  const [movieRating, setMovieRating] = useState(0); 

  return (
    <div>
      <StarRating
        maxRating={5}
        color="#ffd700"
        size={24}
        className="star-rating"
        messages={["差", "一般", "好", "很好", "非常好"]}
        defaultRating={3}
        onSetRating={setMovieRating}
      />
      <p>这个电影的评分为{movieRating}星</p>
    </div>
  );
}

总结

通过本文的实战，我们设计并实现了一个评分组件，涵盖了组件设计的基本原则和具体实现过程。希望对你有所帮助。下次，我会讲解更多高级技巧，敬请期待！

转载自:https://juejin.cn/post/7390899526297124883
评论
请登录