Question

我有一个组件，其中包含一个基于if语句呈现的组件。如果为false，则语句将css类添加到容器组件，而不呈现内部组件；否则，为true。是否以正确的方式添加了该类。另一方面，无论如何，内部组件都不会呈现在快照中。该组件在浏览器中工作正常。

这是容器：

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
<div class="container">
  <div class="row justify-content-center">
    <div class="col-sm-2">
      1
    </div>
    <div class="col-sm-2">
      2
    </div>
    <div class="col-sm-2">
      3
    </div>
        <div class="col-sm-2">
      4
    </div>
    <div class="col-sm-2">
      5
    </div>
  </div>
</div>

这是内部组件：

 <React.Fragment>
            <div className={containerClasses}>
                <div className="conditions-types">
                    <TableHeaderCell title={texts.bookingReferenceInformation1}/>
                    {isTrue(displayFlightBookingReference) && <TableHeaderCell title={texts.bookingReferenceInformation2}/>}
                    {isTrue(displayBookingDate) && <TableHeaderCell title={texts.bookingReferenceInformation3}/>}
                    <TableHeaderCell title={texts.bookingReferenceInformation4}/>
                </div>
                <div className="condition-values">
                    <TableCell value={reservation.bookingCode}/>
                    {isTrue(displayFlightBookingReference) && <TableCell value={bookingNumber}/>}
                    {isTrue(displayBookingDate) && <TableCell value={getHolidaySummaryDate(reservation.datUserCreated)}/>}
                    <TableCell value={departureDateTime}/>
                </div>
            </div> 

             //following is the missing component

            {isTrue(displayCheckInButton) && <CheckInButton btnText={texts.checkInNow} links={links}/>}
        </React.Fragment>

当调试包含if语句“ displayCheckInButton”的值的const时，它在需要时显示为true。该组件应呈现内部组件。

测试：

const CheckInButton = ({btnText ='' ,links= []}) =>
<div className="btn-section thankyouSection">
    <div className="checkin-now-btn">
        <a data-hook="checkInNow" target="_blank" itemProp="url" href={links && links.CheckInNow}>{btnText}</a>
    </div>
</div>;

我尝试了包装程序，看它是否包含该组件。包装程序确实找到了一个具有内部组件类的元素，因为它应该保留快照：

it(`should render BookingReference component with check-in button`, () => {
    const bookingReferenceComponent = mount(<BookingReference {...props} />);
    const wrapper = mount(<BookingReference {...props} />);
    expect(wrapper.find('.btn-section').length).toEqual(1);
    expect(bookingReferenceComponent).toMatchSnapshot();
});

希望我提供了足够的信息

Answer 1

解决方案：

return (
        //instead of fragment i tried div

        <div>
            <div className={containerClasses}>
                <div className="conditions-types">
                    <TableHeaderCell title={texts.bookingReferenceInformation1}/>
                    {isTrue(displayFlightBookingReference) && <TableHeaderCell title={texts.bookingReferenceInformation2}/>}
                    {isTrue(displayBookingDate) && <TableHeaderCell title={texts.bookingReferenceInformation3}/>}
                    <TableHeaderCell title={texts.bookingReferenceInformation4}/>
                </div>
                <div className="condition-values">
                    <TableCell value={reservation.bookingCode}/>
                    {isTrue(displayFlightBookingReference) && <TableCell value={bookingNumber}/>}
                    {isTrue(displayBookingDate) && <TableCell value={getHolidaySummaryDate(reservation.datUserCreated)}/>}
                    <TableCell value={departureDateTime}/>
                </div>
            </div>
            {isTrue(displayCheckInButton) && <CheckInButton btnText={texts.checkInNow} links={links}/>}
        </div>
    );

谢谢大家

开玩笑/反应-快照中未显示组件

1 个答案: