Apakah mungkin untuk kembali kosong dalam fungsi render reaksi?

Saya memiliki komponen pemberitahuan, dan saya memiliki pengaturan batas waktu untuk itu. setelah batas waktu saya telepon this.setState({isTimeout:true}).

Yang ingin saya lakukan adalah jika sudah kehabisan waktu, saya hanya ingin tidak memberikan apa-apa:

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

masalahnya adalah: return (); // di sini ada beberapa kesalahan sintaksis

Ya Anda bisa, tetapi bukannya kosong, kembali saja nulljika Anda tidak ingin renderapa pun dari komponen, seperti ini:

return (null);

Poin penting lainnya adalah, di dalam JSX jika Anda merender elemen secara kondisional, maka dalam kasus condition=false, Anda dapat mengembalikan salah satu dari nilai-nilai ini false, null, undefined, true. Sesuai DOC :

booleans (true/false), null, and undefinedadalah anak-anak yang valid , mereka akan Diabaikan berarti mereka tidak membuat.

Semua JSXekspresi ini akan menghasilkan hal yang sama:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

Contoh:

Hanya nilai ganjil yang akan diberikan, karena untuk nilai genap kami kembali 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' />

Beberapa jawaban sedikit salah dan menunjuk ke bagian dokumen yang salah:

Jika Anda ingin komponen tidak membuat apa pun, kembalilah null, sesuai dokumen :

Dalam kasus yang jarang terjadi, Anda mungkin ingin komponen menyembunyikan dirinya sendiri meskipun komponen itu diberikan oleh komponen lain. Untuk melakukan ini mengembalikan null alih-alih menghasilkan render.

Jika Anda mencoba kembali undefinedmisalnya, Anda akan mendapatkan kesalahan berikut:

Tidak ada yang dikembalikan dari render. Ini biasanya berarti pernyataan kembali tidak ada. Atau, untuk tidak membuat apa pun, kembalikan nol.

Seperti yang ditunjukkan oleh jawaban yang lain, null, true, falsedan undefinedadalah anak-anak yang sah yang berguna untuk render bersyarat dalam BEJ Anda, tetapi Anda ingin komponen Anda untuk menyembunyikan / membuat apa-apa, hanya kembali null.

Ya, Anda dapat mengembalikan nilai kosong dari metode React render.

Anda dapat mengembalikan salah satu dari yang berikut: false, null, undefined, or true

Menurut dokumen :

false, null, undefined, Dan trueadalah anak-anak yang sah. Mereka tidak membuat.

Anda bisa menulis

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

Namun return nullyang paling disukai karena menandakan bahwa tidak ada yang dikembalikan

Agak di luar topik, tetapi jika Anda membutuhkan komponen berbasis kelas yang tidak pernah menerjemahkan apa pun dan Anda senang menggunakan sintaks ES yang belum distandarisasi, Anda mungkin ingin pergi:

render = () => null

Ini pada dasarnya adalah metode panah yang saat ini membutuhkan plugin Babel transform-class-properties . Bereaksi tidak akan membiarkan Anda mendefinisikan komponen tanpa renderfungsi dan ini adalah bentuk paling ringkas yang memenuhi persyaratan ini yang dapat saya pikirkan.

Saat ini saya menggunakan trik ini dalam varian ScrollToTop yang dipinjam dari react-routerdokumentasi. Dalam kasus saya, hanya ada satu contoh komponen dan tidak membuat apa pun, jadi bentuk singkat "render null" cocok di sana.

Kita bisa kembali seperti ini,

return <React.Fragment />;

Mengembalikan nilai falsy dalam fungsi render () tidak akan menghasilkan apa-apa. Jadi Anda bisa melakukannya

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