เป็นไปได้ไหมที่จะคืนค่าว่างในฟังก์ชัน Render render?

ฉันมีองค์ประกอบการแจ้งเตือนและฉันมีการตั้งค่าการหมดเวลาสำหรับมัน this.setState({isTimeout:true})หลังจากหมดเวลาผมโทร

สิ่งที่ฉันต้องการทำคือถ้าหมดเวลาแล้วฉันไม่ต้องการแสดงผลอะไรเลย:

  render() {
    let finalClasses = "" + (this.state.classes || "");
    if (isTimeout){
      return (); // here has some syntax error
    }
    return (<div>{this.props.children}</div>);
  }

ปัญหาคือ: return (); // ที่นี่มีข้อผิดพลาดทางไวยากรณ์

ใช่คุณทำได้ แต่แทนที่จะเว้นว่างกลับไปnullถ้าคุณไม่ต้องการrenderอะไรจากองค์ประกอบเช่นนี้:

return (null);

จุดสำคัญอีกประการหนึ่งคือภายใน JSX หากคุณกำลังแสดงผลองค์ประกอบตามเงื่อนไขในกรณีนี้condition=falseคุณสามารถส่งคืนค่าใด ๆ เหล่านี้false, null, undefined, trueได้ ตามDOC :

booleans (true/false), null, and undefinedเป็นเด็กที่ถูกต้องพวกเขาจะถูกเพิกเฉยหมายความว่าพวกเขาไม่ได้แสดง

JSXนิพจน์ทั้งหมดเหล่านี้จะแสดงเป็นสิ่งเดียวกัน:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

ตัวอย่าง:

nullเฉพาะค่าคี่จะได้รับการแสดงผลเพราะสำหรับค่าแม้เราจะกลับมา

const App = ({ number }) => {
  if(number%2) {
    return (
      <div>
        Number: {number}
      </div>
    )
  }
  
  return (null);           //===> notice here, returning null for even values
}

const data = [1,2,3,4,5,6];

ReactDOM.render(
  <div>
    {data.map(el => <App key={el} number={el} />)}
  </div>,
  document.getElementById('app')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app' />

คำตอบบางคำไม่ถูกต้องเล็กน้อยและชี้ไปที่ส่วนที่ผิดของเอกสาร:

หากคุณต้องการให้คอมโพเนนต์ไม่แสดงผลใด ๆ เพียงแค่ส่งคืนnullตามเอกสาร :

ในบางกรณีคุณอาจต้องการให้คอมโพเนนต์ซ่อนตัวเองแม้ว่าคอมโพเนนต์อื่นจะแสดงผล เมื่อต้องการทำสิ่งนี้ส่งคืนค่าว่างแทนการแสดงผล

undefinedตัวอย่างเช่นหากคุณพยายามย้อนกลับคุณจะได้รับข้อผิดพลาดต่อไปนี้:

ไม่มีสิ่งใดถูกส่งกลับจากการแสดงผล ซึ่งมักจะหมายความว่าไม่มีคำสั่งส่งคืน หรือหากต้องการแสดงผลอะไรให้คืนค่า null

ในฐานะที่เป็นแหลมออกโดยคำตอบอื่น ๆ , null, true, falseและundefinedเป็นเด็กที่ถูกต้องซึ่งจะเป็นประโยชน์สำหรับการแสดงผลตามเงื่อนไขภายใน JSX ของคุณ แต่คุณต้องการส่วนประกอบของคุณเพื่อซ่อน / nullแสดงผลอะไรเพียงแค่ผลตอบแทน

ได้คุณสามารถส่งคืนค่าว่างจากวิธี React render

คุณสามารถส่งคืนสิ่งต่อไปนี้: false, null, undefined, or true

ตามเอกสาร :

false, null, undefinedและtrueเป็นเด็กที่ถูกต้อง พวกเขาไม่แสดงผล

คุณสามารถเขียน

return null; or
return false; or
return true; or
return undefined; 

อย่างไรก็ตามreturn nullเป็นที่ต้องการมากที่สุดเนื่องจากแสดงว่าไม่มีการส่งคืน

นอกหัวข้อเล็กน้อย แต่ถ้าคุณต้องการส่วนประกอบตามคลาสที่ไม่เคยแสดงผลอะไรเลยและคุณยินดีที่จะใช้ไวยากรณ์ ES ที่ยังไม่ได้มาตรฐานคุณอาจต้องไป:

render = () => null

นี่เป็นวิธีการลูกศรที่ปัจจุบันต้องใช้ปลั๊กอิน Babel คุณสมบัติการแปลงคลาส การตอบสนองจะไม่อนุญาตให้คุณกำหนดองค์ประกอบโดยไม่มีrenderฟังก์ชันและนี่คือรูปแบบที่กระชับที่สุดที่ตรงตามข้อกำหนดนี้ที่ฉันคิดได้

ฉันกำลังใช้เคล็ดลับนี้กับScrollToTop ที่ยืมมาจากreact-routerเอกสาร ในกรณีของฉันมีเพียงอินสแตนซ์เดียวของคอมโพเนนต์และไม่แสดงผลอะไรเลยดังนั้นรูปแบบสั้น ๆ ของ "render null" จึงเข้ากันได้ดี

เรากลับแบบนี้ได้

return <React.Fragment />;

การส่งคืนค่าที่เป็นเท็จในฟังก์ชัน render () จะทำให้ไม่มีอะไร คุณก็ทำได้

 render() {
    let finalClasses = "" + (this.state.classes || "");
    return !isTimeout && <div>{this.props.children}</div>;
  }