Czy można zwrócić pusty w funkcji Render Render?

Mam składnik powiadomień i mam dla niego ustawienie limitu czasu. po przekroczeniu limitu czasu dzwonię this.setState({isTimeout:true}).

To, co chcę zrobić, to jeśli już upłynął limit czasu, chcę po prostu nic nie renderować:

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

problem jest taki: return (); // tutaj jest błąd składni

Tak, możesz, ale zamiast pustego pola, po prostu wróć, nulljeśli nie chcesz renderniczego z komponentu, na przykład:

return (null);

Inną ważną kwestią jest to, że wewnątrz JSX, jeśli renderujesz element warunkowo, to w przypadku condition=falsemożesz zwrócić dowolną z tych wartości false, null, undefined, true. Zgodnie z DOC :

booleans (true/false), null, and undefinedsą prawidłowymi dziećmi , zostaną zignorowane, co oznacza, że ​​po prostu się nie renderują.

Wszystkie te JSXwyrażenia będą odpowiadać temu samemu:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

Przykład:

Renderowane będą tylko wartości nieparzyste, ponieważ zwracamy wartości parzyste 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' />

Niektóre odpowiedzi są nieco niepoprawne i wskazują na niewłaściwą część dokumentów:

Jeśli chcesz, aby komponent nic nie renderował, po prostu zwróć null, zgodnie z dokumentem :

W rzadkich przypadkach możesz chcieć, aby komponent ukrył się, mimo że został wyrenderowany przez inny komponent. Aby to zrobić, zamiast wyniku renderowania zwraca wartość null.

Jeśli spróbujesz undefinedna przykład zwrócić, pojawi się następujący błąd:

Nic nie zostało zwrócone z renderowania. Zwykle oznacza to brak instrukcji powrotu. Lub, aby nic nie renderować, zwraca wartość null.

Jak podkreślił innych odpowiedzi, null, true, falsei undefinedsą ważne dla dzieci, które jest przydatne do renderowania warunkowego wewnątrz swojej JSX, ale chcesz, aby komponent do ukrycia / czynią nic, po prostu wrócić null.

Tak, możesz zwrócić pustą wartość z metody renderowania React.

Możesz zwrócić dowolne z poniższych: false, null, undefined, or true

Według dokumentów :

false, null, undefined, I truesą ważne dla dzieci. Po prostu się nie renderują.

Możesz pisać

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

Jednak return nulljest to najbardziej preferowane, ponieważ oznacza, że ​​nic nie jest zwracane

Nieco niezwiązane z tematem, ale jeśli kiedykolwiek potrzebowałeś komponentu opartego na klasach, który nigdy niczego nie renderuje i jesteś szczęśliwy, używając jakiejś jeszcze nie znormalizowanej składni ES, możesz chcieć:

render = () => null

Jest to w zasadzie metoda strzałkowa, która obecnie wymaga wtyczki Babel transform-class-properties . React nie pozwoli ci zdefiniować komponentu bez renderfunkcji i jest to najbardziej zwięzła forma spełniająca ten wymóg, o jakim mogę pomyśleć.

Obecnie używam tej sztuczki w wariancie ScrollToTop zapożyczonym z react-routerdokumentacji. W moim przypadku jest tylko jedna instancja komponentu i nic nie renderuje, więc krótka forma "render null" pasuje tam dobrze.

Możemy tak wrócić

return <React.Fragment />;

Zwrócenie fałszywej wartości w funkcji render () nic nie wyświetli. Możesz więc po prostu zrobić

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