Question

enter image description here我使用的是这种react语法，需要显示购物袋名称和价格，并且价格接近下拉菜单的最高价

<Select className="bags-list">
  {(this.props.bags).map(bag => (
    <option key={ bag.Name } value={ bag.Name }>
      { bag.Name } {'$'}{(bag.sellPrice) ? bag.sellPrice : bag.Price}
    </option>
  )}
</Select>

Answer 1

您可以在<option />标签之间呈现任意内容。所以你可以做这样的事情

<option key={bag.Name} value={bag.Name} className="option">
  <p>{bag.Name}</p>
  <p>`$ ${bag.sellPrice || bag.Price)}`</p>
</options>

现在，您可以设置选项的样式，就像其他任何HTML标记一样，它们都是子样式。这样的事情应该可以解决问题：

.option {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

需要在开始时显示一个元素，在最右端显示另一个元素

1 个答案: