React 30 秒速学：制作星级评分组件-白红宇

本文译自：。 React 30 秒速学：精选有用的 React 片段，30-seconds-of-react 的中文版本，已全部完成翻译、上线，地址：。

星级评分组件。

定义一个名为“Star”的组件，它将根据父组件的状态为每个星形呈现适当的外观。

在StarRating组件中，使用React.useState()钩子来定义rating和selection状态变量，初始值为props.rating（如果无效或未传入，则为 0 ）和 0 。

创建一个方法hoverOver，根据传入的event更新selected和rating。

创建一个<div>来包装<Star>组件，这些组件是使用Array.prototype.map在5个元素的数组上创建的，使用Array.from创建，并处理onMouseLeave 将selection设置为0的事件，onClick事件设置rating和onMouseOver事件，分别将selection设置为event.target的star-id属性。

最后，将适当的值传递给每个<Star>组件（starId和marked）。

星星组件：

function Star({ marked, starId }) {  return (          {/* 空星，实星 */}      {marked ? "\u2605" : "\u2606"}      );}复制代码

星级评分：

function StarRating(props) {  // 分数显示  const [rating, setRating] = React.useState(    typeof props.rating == "number" ? props.rating : 0  );  // 鼠标移入效果  const [selection, setSelection] = React.useState(0);  const hoverOver = event => {    let val = 0;    if (event && event.target && event.target.getAttribute("star-id"))      val = event.target.getAttribute("star-id");    setSelection(val);  };  return (    
    
      hoverOver(null)}      // 点击选中分数      onClick={event =>        setRating(event.target.getAttribute("star-id") || rating)      }      onMouseOver={hoverOver}    >      {/* 创建5个组件 */}      {Array.from({ length: 5 }, (v, i) => (        
     
      = i + 1 : rating >= i + 1}        />      ))}    
     
    
  );}复制代码

例子

export default function() {  return 
        
         
       
    
;}复制代码