เป็นไปได้ไหมที่จะใช้คำสั่ง if … else …ในฟังก์ชัน React render?

โดยพื้นฐานแล้วฉันมีส่วนประกอบของปฏิกิริยาrender()ร่างกายของมันมีหน้าที่ดังต่อไปนี้: (มันเป็นสิ่งที่ดีที่สุดของฉันซึ่งหมายความว่ามันใช้ไม่ได้ในขณะนี้)

render(){
    return (
        <div>
            <Element1/>
            <Element2/>
            // note: code does not work here
            if (this.props.hasImage) <MyImage />
            else <OtherElement/>
        </div>
    )
}

ไม่ใช่อย่างนั้น แต่มีวิธีแก้ปัญหา มีส่วนหนึ่งในเอกสารของ Reactเกี่ยวกับการแสดงผลแบบมีเงื่อนไขที่คุณควรดู นี่คือตัวอย่างของสิ่งที่คุณสามารถทำได้โดยใช้ inline if-else

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

คุณยังสามารถจัดการกับมันได้ภายในฟังก์ชัน render แต่ก่อนที่จะส่งคืน jsx

if (isLoggedIn) {
  button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
  button = <LoginButton onClick={this.handleLoginClick} />;
}

return (
  <div>
    <Greeting isLoggedIn={isLoggedIn} />
    {button}
  </div>
);

นอกจากนี้ยังควรกล่าวถึงสิ่งที่ ZekeDroid นำเสนอในความคิดเห็น หากคุณแค่ตรวจสอบเงื่อนไขและไม่ต้องการแสดงโค้ดบางส่วนที่ไม่เป็นไปตามนั้นคุณสามารถใช้ไฟล์&& operator.

  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );

มีวิธีทำตามที่ OP ถามจริงๆ เพียงแค่แสดงและเรียกใช้ฟังก์ชันที่ไม่ระบุตัวตนดังนี้:

render () {
  return (
    <div>
      {(() => {
        if (someCase) {
          return (
            <div>someCase</div>
          )
        } else if (otherCase) {
          return (
            <div>otherCase</div>
          )
        } else {
          return (
            <div>catch all</div>
          )
        }
      })()}
    </div>
  )
}

คุณสามารถแสดงอะไรโดยใช้conditionalคำสั่งเช่นif, else:

 render() {
    const price = this.state.price;
    let comp;

    if (price) {

      comp = <h1>Block for getting started with {this.state.price}</h1>

    } else {

      comp = <h1>Block for getting started.</h1>

    }

    return (
      <div>
        <div className="gettingStart">
          {comp}
        </div>
      </div>
    );
  }

คุณควรจำเกี่ยวกับตัวดำเนินการ TERNARY

:

ดังนั้นรหัสของคุณจะเป็นแบบนี้

render(){
    return (
        <div>
            <Element1/>
            <Element2/>
            // note: code does not work here
            { 
               this.props.hasImage ?  // if has image
               <MyImage />            // return My image tag 
               :
               <OtherElement/>        // otherwise return other element  

             }
        </div>
    )
}

หากคุณต้องการให้เงื่อนไขแสดงองค์ประกอบคุณสามารถใช้สิ่งนี้ได้

renderButton() {
    if (this.state.loading) {
        return <Spinner size="small" spinnerStyle={styles.spinnerStyle} />;
    }

    return (
        <Button onPress={this.onButtonPress.bind(this)}>
            Log In
        </Button>
    );
}

จากนั้นเรียกใช้วิธีการช่วยเหลือภายในฟังก์ชันการแสดงผล

<View style={styles.buttonStyle}>
      {this.renderButton()}
</View>

หรือคุณสามารถใช้วิธีอื่นในการคืนสภาพภายใน

{this.props.hasImage ? <element1> : <element2>}

ชวเลขสำหรับโครงสร้าง if else ทำงานตามที่คาดไว้ใน JSX

this.props.hasImage ? <MyImage /> : <SomeotherElement>

คุณสามารถค้นหาตัวเลือกอื่น ๆ ได้ในบล็อกโพสต์ของDevNachoแต่เป็นเรื่องปกติที่จะใช้ชวเลข ถ้าคุณต้องการคำสั่ง if ที่ใหญ่กว่าคุณควรเขียนฟังก์ชันที่ส่งคืนหรือส่วนประกอบ A หรือส่วนประกอบ B

ตัวอย่างเช่น:

this.setState({overlayHovered: true});

renderComponentByState({overlayHovered}){
    if(overlayHovered) {
        return <overlayHoveredComponent />
    }else{
        return <overlayNotHoveredComponent />
    }
}

คุณสามารถทำลายโครงสร้างโอเวอร์เลย์ของคุณที่ซ่อนจาก this.state ได้ถ้าคุณให้มันเป็นพารามิเตอร์ จากนั้นเรียกใช้ฟังก์ชันนั้นในเมธอด render () ของคุณ:

renderComponentByState(this.state)

หากคุณต้องการมากกว่าหนึ่งเงื่อนไขคุณสามารถลองใช้งานได้

https://www.npmjs.com/package/react-if-elseif-else-render

import { If, Then, ElseIf, Else } from 'react-if-elseif-else-render';

class Example extends Component {

  render() {
    var i = 3; // it will render '<p>Else</p>'
    return (
      <If condition={i == 1}>
        <Then>
          <p>Then: 1</p>
        </Then>
        <ElseIf condition={i == 2}>
          <p>ElseIf: 2</p>
        </ElseIf>
        <Else>
          <p>Else</p>
        </Else>
      </If>
    );
  }
}

ประเภทที่ 1: Ifรูปแบบคำสั่ง

{props.hasImage &&

  <MyImage />

}

ประเภทที่ 2: If elseรูปแบบคำสั่ง

   {props.hasImage ?

      <MyImage /> :

      <OtherElement/>

    }

ฉันอาจจะสายเกินไปที่นี่ แต่ฉันหวังว่านี่จะช่วยใครบางคนได้ ก่อนอื่นให้แยกทั้งสององค์ประกอบ

renderLogout(){
<div>
   <LogoutButton onClick={this.handleLogoutClick} />
<div>
}

renderLogin(){
<div>
   <LoginButton onClick={this.handleLoginClick} />
<div>
}

จากนั้นคุณสามารถเรียกใช้ฟังก์ชันเหล่านี้จากฟังก์ชัน render โดยใช้คำสั่ง if else

render(){
if(this.state.result){
  return this.renderResult();
}else{
  return this.renderQuiz();
}}

สิ่งนี้ใช้ได้กับฉัน :)

ฉันใช้ตัวดำเนินการที่เกี่ยวข้องและมันก็ใช้ได้ดีสำหรับฉัน

> {item.lotNum == null ? ('PDF'):(item.lotNum)}

นอกจากนี้คุณยังสามารถใช้ตัวดำเนินการตามเงื่อนไข (ternary) ภายในตัวดำเนินการแบบมีเงื่อนไขในกรณีที่คุณมีการอ้างอิง 2 รายการที่แตกต่างกัน

{
(launch_success)
  ?
  <span className="bg-green-100">
    Success
  </span>
  :
  (upcoming)
    ?
    <span className="bg-teal-100">
      Upcoming
    </span>
    :
    <span className="bg-red-100">
      Failed
    </span>
}

ลองใช้ Switch case หรือ ternary operator

render(){
    return (
        <div>
            <Element1/>
            <Element2/>
            // updated code works here
            {(() => {
                        switch (this.props.hasImage) {
                            case (this.props.hasImage):
                                return <MyImage />;
                            default:
                                return (
                                   <OtherElement/>; 
                                );
                        }
                    })()}
        </div>
    )
}

สิ่งนี้ได้ผลสำหรับฉันและควรทำงานให้คุณคนอื่น ลองใช้Ternary Operator