Question

首先，我是ReactJs的新手，我必须创建一个半星评级的5星评论组件，我已经在Angular5中实现了，

内部地图方法我必须循环以下元素

 <!-- full star -->
 <input 
      id="'star'+num"
      value="num-0.5"
      name="rating" 
      type="radio" />
 <label className="full"></label>
 <!-- half star -->
 <input
   value="num-0.5"
   id="'halfstar'+num" 
   name="rating" 
   type="radio"  />
 <label className="half"> </label>

这会返回一个错误，因为它需要一个包装div元素，但是如果我们使用div，那么css star review将不起作用，因为我从以下示例中获取了这个：

https://codepen.io/jamesbarnett/pen/vlpkh

在Angular中，它使用ng-container实现，请参阅下面的示例：

https://angularfirebase.com/lessons/star-ratings-system-with-firestore/

有没有办法在React中解决这个问题。

Answer 1

在React类中，保留关键字来声明组件。所以你必须在JSX标签中使用className。将你的代码包装在div中并使用className而不是class，它应该可以工作

下面的工作示例

 <div>
      <input 
         id="'star'+num"
         value="num-0.5"
         name="rating" 
         type="radio" />
     <label className="full"></label>

     <input
          value="num-0.5"
        id="'halfstar'+num" 
        name="rating" 
        type="radio"  />
    <label className="half"> </label>
  </div>

当您升级到React V16并且他们调用片段时，您甚至可以在没有div的情况下返回。您还可以返回字符串。请查看此处的文档以获取详细信息https://reactjs.org/blog/2017/09/26/react-v16.0.html

但是你必须为每个元素设置关键字以获得更好的性能并避免警告。

片段返回结构基本上是一个类似

的数组

return [
     <input />
     <input />
 ]

星组件映射方法

1 个答案: