JSX 条件渲染内联问题 <option disabled value="">选择一个值</option>

如何解决JSX 条件渲染内联问题 <option disabled value="">选择一个值</option>

我知道内联正在工作，因为在顶部的 Convert HK to Passive Segment 段落中，我得到了预期的结果。我想要的是当阵列中有不止一家酒店时有一个选择酒店，但如果只有一家酒店，则不要添加它，该人会看到显示唯一一家酒店的下拉列表。

我是新手。这是一个使用 React 的打字稿项目。 var 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>

解决方法

所以，澄清你的问题；

这条线是 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] 替换为第一家酒店的变量（如果有）。

,

所以感谢 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>