React render fonksiyonunda boş olarak dönmek mümkün müdür?

Bir bildirim bileşenim var ve bunun için bir zaman aşımı ayarım var. zaman aşımından sonra ararım this.setState({isTimeout:true}).

Yapmak istediğim şey, zaten zaman aşımına uğradıysa, hiçbir şey oluşturmak istemiyorum:

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

sorun şudur: return (); // burada bazı sözdizimi hatası var

Evet yapabilirsiniz, ancak boş yerine, bileşenden herhangi bir şey nullistemiyorsanız geri dönün render, örneğin:

return (null);

Bir diğer önemli nokta, JSX içinde, öğeyi koşullu olarak oluşturuyorsanız, bu durumda condition=false, bu değerlerden herhangi birini döndürebilirsiniz false, null, undefined, true. DOC uyarınca :

booleans (true/false), null, and undefinedHangi geçerli çocuklar , onlar sadece render yoktur demektir Sayılan edilecektir.

Tüm bu JSXifadeler aynı anlama gelecek:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

Misal:

Çift değerler için döndürdüğümüzden, yalnızca tek sayılar işlenecektir 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' />

Bazı yanıtlar biraz yanlıştır ve belgelerin yanlış kısmına işaret eder:

Eğer bir bileşen şey işlemek istiyorsanız, sadece dönmek nulluyarınca, doc :

Nadir durumlarda, bir bileşenin başka bir bileşen tarafından oluşturulmuş olsa bile kendisini gizlemesini isteyebilirsiniz. Bunu yapmak için render çıktısı yerine null döndürür.

undefinedÖrneğin geri dönmeye çalışırsanız , aşağıdaki hatayı alırsınız:

Oluşturmadan hiçbir şey döndürülmedi. Bu genellikle bir return ifadesinin eksik olduğu anlamına gelir. Veya hiçbir şey oluşturmak için boş döndür.

Diğer cevaplar işaret ettiği gibi, null, true, falseve undefinedkoşullu render için yararlıdır geçerli çocuklardır içeride sizin JSX, ancak bu postu için bileşeni istiyorum / hiçbir şey işlemek, sadece dönmek null.

Evet, bir React oluşturma yönteminden boş bir değer döndürebilirsiniz.

Aşağıdakilerden herhangi birini iade edebilirsiniz: false, null, undefined, or true

Dokümanlara göre :

false, null, undefinedVe truegeçerli çocuklardır. Onlar sadece render etmezler.

Yazabilirsin

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

Ancak return null, hiçbir şeyin iade edilmediğini gösterdiği için en çok tercih edilenidir

Biraz konu dışı, ancak hiçbir zaman hiçbir şeyi oluşturmayan sınıf tabanlı bir bileşene ihtiyacınız varsa ve henüz standartlaştırılmamış ES sözdizimini kullanmaktan memnunsanız, gitmek isteyebilirsiniz:

render = () => null

Bu temelde şu anda dönüşüm sınıfı özellikleri Babel eklentisini gerektiren bir ok yöntemidir . React, renderfonksiyon olmadan bir bileşeni tanımlamanıza izin vermez ve bu, aklıma gelen bu gereksinimi karşılayan en özlü biçimdir.

Şu anda bu numarayı belgelerden ödünç alınan ScrollToTop'un bir varyantında kullanıyorum react-router. Benim durumumda, bileşenin yalnızca tek bir örneği var ve hiçbir şey oluşturmuyor, bu nedenle kısa bir "null render" biçimi oraya uyuyor.

Böyle dönebiliriz

return <React.Fragment />;

Render () işlevinde yanlış değer döndürmek hiçbir şey oluşturmaz. Yani yapabilirsin

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