JSX 条件呈现内联问题<选项禁用值 = " " >选择一个值</option>

Question

我知道内联正在工作，因为在顶部的"将HK转换为被动段"段落中，我得到了预期的结果。我想要的是，当数组中有多家酒店时，会有一个"选择酒店"，但如果只有一家酒店，则不要添加它，并且该人会看到显示唯一酒店的下拉列表。

我是一个新手。这是一个使用React的打字脚本项目。变量howmany正在评估。这条线是1家酒店还是10家酒店{howmany > 1 && <option disabled value="">Choose a hotel </option>}永远不会出现——为什么？最初我有这个，但它不起作用(以防问题与关键有关。。。{howmany > 1 && <option key=0 value="">Choose a hotel </option>}

render(): JSX.Element {
const howmany: number = this.state.hotelList.length;
return (
<div className="tab-pane" id="hotelscript">
<p>Convert HK to Passive Segment {howmany > 1 && `True`}</p>
<form id="FormHkToYk" onSubmit={this.handleSubmit} ref="form">
<div className="form-row">
<label htmlFor="hotelList">Hotel List ({howmany})</label>
<select
className="form-control"
name="hotelList"
onChange={this.getThisHotel.bind(this)}
>
{howmany > 1 &&
`<option disabled value="">Choose a hotel </option>`}
{this.state.hotelList.map((h) => (
<option key={h.Id} value={h.Id}>
{h.Id}- {h.HotelInformation.Name} -{" "}
{h.ReservationDetails.CheckIn}
</option>

Answer 1

因此，为了澄清您的问题；

无论是1家酒店还是10家酒店，这条{howmany > 1 && <option disabled value="">Choose a hotel </option>}线永远不会呈现-为什么？

因为，只有当howmany或this.state.hotelList.length大于1时才会渲染它-所以，只有当它2及以上时才会渲染

我想要的是当阵列中有多家酒店时有一个选择酒店，但如果只有一家酒店，则不要添加它，并且该人看到下拉列表，其中显示的是唯一的酒店

因此，您可以执行以下操作；

<form id="FormHkToYk" onSubmit={this.handleSubmit} ref="form">
<div className="form-row">
<label htmlFor="hotelList">Hotel List ({howmany})</label>
<select
className="form-control"
name="hotelList"
onChange={this.getThisHotel.bind(this)}
>
{
howmany === 1 ? (
<option key={this.state.hotelList[0].Id} value={this.state.hotelList[0].Id}>
{this.state.hotelList[0].Id}- {this.state.hotelList[0].HotelInformation.Name} - {this.state.hotelList[0].ReservationDetails.CheckIn}
</option>
) : (
howmany > 1 && (
<option disabled value="">Choose a hotel </option>
{
this.state.hotelList.map((h) => (
<option key={h.Id} value={h.Id}>
{h.Id}- {h.HotelInformation.Name} - {h.ReservationDetails.CheckIn}
</option>
)
}
)
)
}
</select>
</form>

关于上述代码的注意事项：

1. 上面的代码不包括有0家酒店的情况
2. 您应该将this.state.hotelList[0]替换为第一家酒店的变量(如果有的话(

Answer 2

非常感谢Choz和Nikita的快速响应。。。我想这是一件奇怪的事情。。。我采用了这种方法，这基本上就是我最初所做的。我曾尝试过choz的想法，但出于某种原因，不平衡的括号或将"选择酒店"选项和其他选项结合起来会引起问题。

也许我误会你了。

不管怎样，这似乎有效-我把

<option value="">Select a hotel please.....</option>;

在渲染的上方，使其在渲染语句本身中查看更清晰。不确定发生了什么事，但我发誓我早些时候试过了。

所以这很好。。。如果>1酒店，然后它说"；请选择一家酒店"否则它只有1家酒店(是的，我之前验证过(，所以它将默认为该酒店。感谢大家的及时回复。。。干杯只是分享万一无论如何都想说我的解决方案不好。

render(): JSX.Element {
const howmany: number = this.state.hotelList.length;
let dropdownList;
//   this isn't working....
if (howmany > 1) {
dropdownList = <option value="">Select a hotel please.....</option>;
}
return (
<div className="tab-pane" id="hotelscript">
<p>Convert HK to Passive Segment</p>
<form id="FormHkToYk" onSubmit={this.handleSubmit} ref="form">
<div className="form-row">
<label htmlFor="hotelList">Hotel List ({howmany})</label>
<select
className="form-control"
name="hotelList"
onChange={this.getThisHotel.bind(this)}
>
{dropdownList}
{this.state.hotelList.map((h) => (
<option key={h.Id} value={h.Id}>
{h.Id}- {h.HotelInformation.Name} -{" "}
{h.ReservationDetails.CheckIn}
</option>
))}
</select>