我如何映射和设置索引0为真，其他为假onclick反应JS

Question

我如何映射并将索引0设置为true而其他设置为false onclick react js这个map函数显示所有票证的详细信息，这个想法是当用户点击按钮显示每张票的详细信息时，我怎么能返回根据门票数量的按钮然后点击显示一个单一的票务细节，所以我可以如何做任何建议或解决方案

state = {
  result: [],
  success: 'success',
  show: false,
};

ltenaryHandler = () => {
  this.setState({
    show: !this.state.show
  });
};

render() {
    const arabic = this.props.intl.locale === 'ar';
    const result = this.state.result.map((results, i) => {
      const departureDateApi = results.flight.travelSegment[0].departureDate;
      const DepartureDate = moment(departureDateApi).format('DD/MM/YYYY');
      const tripSegmentDuration = results.flight.travelSegment[0].arrivalTime;
      const newTripSegmentDuration = moment(tripSegmentDuration).format('HH:mm:ss');
      const DateOfFlight = results.flight.travelSegment[0].departureTime;
      const DateOfFlightMomented = moment(DateOfFlight)
        .add(0, 'hours')
        .format('LLL');

      return ( <
        div key = {
          results.id
        }
        className = {
          'container'
        } >
        <
        TogglePlus onClick = {
          () => this.ltenaryHandler(i)
        } > {
          this.state.show && ( <
            div className = {
              'ltenaryHandler'
            } >
            <
            BookingConfirmation / >
            <
            Header display = {
              this.props.display
            }
            test = {
              i + 1
            }
            /> <
            DepartureInfo key = {
              results
            }
            display = {
              this.props.display
            }
            airportDeparture = {
              results.flight.travelSegment[0].departureAirport === ' ' ?
              `${results.flight.travelSegment[0].departureAirport}` :
                `${results.flight.travelSegment[0].departureAirport} `.replace(/ /, ' - ')
            }
            departure = {
              DepartureDate
            }
            segmentTripDuration = {
              newTripSegmentDuration
            }
            /> <
            FlightDetail / >
            <
            FlightInside alt = {
              'Logo Company'
            }
            flightNumberPass = {
              results.flight.travelSegment[0].aircraftName
            }
            PNR = {
              results.flight.travelSegment[0].airlinePnr
            }
            FlightOperator = {
              results.flight.travelSegment[0].airlineName
            }
            departureCountry = {
              results.flight.travelSegment[0].departureAirport
            }
            ArrivalCountry = {
              results.flight.travelSegment[0].arrivalAirport
            }
            DateOfFlight = {
              DateOfFlightMomented
            }
            airport = {
              results.flight.travelSegment[0].departureAirport
            }
            arrivalAirport = {
              results.flight.travelSegment[0].arrivalAirport
            }
            terminal = {
              results.flight.travelSegment[0].departureTerminal
            }
            arrivalTerminal = {
              results.flight.travelSegment[0].arrivalTerminal
            }
            /> <
            FlightAmenities / >
            <
            Wrapper arabic = {
              arabic
            }
            padding = {
              '5px 10px'
            }
            background = {
              '#d3d3d4'
            } >
            <
            Desc > {
              `${this.props.intl.formatMessage({
                        id: 'Transit_Airport',
                      })} `
            } < /Desc> <
            /Wrapper> <
            FlightDetail / >
            <
            FlightInside alt = {
              'Logo Company'
            }
            flightNumberPass = {
              results.flight.travelSegment[0].aircraftName
            }
            PNR = {
              results.flight.travelSegment[0].airlinePnr
            }
            FlightOperator = {
              results.flight.travelSegment[0].airlineName
            }
            departureCountry = {
              results.flight.travelSegment[0].departureAirport
            }
            ArrivalCountry = {
              results.flight.travelSegment[0].arrivalAirport
            }
            DateOfFlight = {
              DateOfFlightMomented
            }
            airport = {
              results.flight.travelSegment[0].departureAirport
            }
            arrivalAirport = {
              results.flight.travelSegment[0].arrivalAirport
            }
            terminal = {
              results.flight.travelSegment[0].departureTerminal
            }
            arrivalTerminal = {
              results.flight.travelSegment[0].arrivalTerminal
            }
            /> <
            FlightAmenities / >
            <
            /div>
          )
        } <
        /TogglePlus> <
        /div>
      );
    });

Answer 1

React在npmjs上有各种全面的解决方案，包括我认为你所要求的，称为手风琴。手风琴是可折叠的单选部分。

有各种各样的npm解决方案，包括react-accessible-accordion，其中accordion是默认值，rc-collapse，其中必须设置accordion。

或者，不使用节点模块，您的问题已经回答in this other question on stackoverflow。