Question

我在我的应用中使用React Rating ...

在React中我像这样渲染Rating组件：

<div className="rate-mod">
  <Rating {...input}
    stop={3}
    empty={['temp 1', 'temp 2', 'temp 3']}
  />
</div>

输出如下：

<div class="rate-mod">
  <span name="skill_id_1" value="">
    <span style="cursor: pointer; display: inline-block; position: relative;">
      <span class="temp 1"></span>
      <span style="display: inline-block; position: absolute; overflow: hidden; top: 0px; left: 0px; width: 0%;">
      <span style="display: inline-block; border-radius: 50%; border: 5px double white; width: 30px; height: 30px; background-color: black;">
    </span>
  </span>
   ....
</div>

如何让rate-mod成为弹性框，这样每个评级选项都在弹性框内，并且有一个宽度，以便选项填充rate-mod的整个宽度？

Answer 1

将display: flex; flex-direction: column添加到rate-mod，项目（假设您的选项）将垂直堆叠，而width: 100%它们将具有其父级的宽度， rate-mod。

.rate-mod {
  display: flex;
  flex-direction: column;
}
.rate-mod > span {
  width: 100%;
  border: 1px dashed red;
}

<div class="rate-mod">
  <span name="skill_id_1" value="">
    <span style="cursor: pointer; display: inline-block; position: relative;">
      <span class="temp 1"></span>
      <span style="display: inline-block; position: absolute; overflow: hidden; top: 0px; left: 0px; width: 0%;"></span>
      <span style="display: inline-block; border-radius: 50%; border: 5px double white; width: 30px; height: 30px; background-color: black;"></span>      
    </span>    
  </span>

  <span name="skill_id_1" value="">
    <span style="cursor: pointer; display: inline-block; position: relative;">
      <span class="temp 1"></span>
      <span style="display: inline-block; position: absolute; overflow: hidden; top: 0px; left: 0px; width: 0%;"></span>
      <span style="display: inline-block; border-radius: 50%; border: 5px double white; width: 30px; height: 30px; background-color: black;"></span>      
    </span>    
  </span>

  <span name="skill_id_1" value="">
    <span style="cursor: pointer; display: inline-block; position: relative;">
      <span class="temp 1"></span>
      <span style="display: inline-block; position: absolute; overflow: hidden; top: 0px; left: 0px; width: 0%;"></span>
      <span style="display: inline-block; border-radius: 50%; border: 5px double white; width: 30px; height: 30px; background-color: black;"></span>      
    </span>    
  </span>
</div>

如果您的意思是名为span的{{1}}应该是弹性框，则可以添加这样的弹性属性（此处使用"skill_id_1水平堆叠）。

flex-grow

.rate-mod > span {
  display: flex;
}
.rate-mod > span > span {
  flex-grow: 1;
  border: 1px dashed red;
}

您可以使用属性选择器<div class="rate-mod"> </div>代替直接子选择器>，该属性选择器定位具有属性值的元素，该属性值以 value 为前缀，并且在这种情况下，所有元素的值都以[attr^=value]开头。

skill_id

.rate-mod [name^='skill_id'] {
  display: flex;
}
.rate-mod [name^='skill_id'] > span {
  flex-grow: 1;
  border: 1px dashed red;
}

如何将Flex-box添加到React Rating？

1 个答案: