Có thể trả về sản phẩm nào trong chức năng render phản ứng không?

Tôi có một thành phần thông báo và tôi có cài đặt thời gian chờ cho nó. sau khi hết giờ tôi gọi this.setState({isTimeout:true}).

Những gì tôi muốn làm là nếu đã hết thời gian, tôi chỉ muốn kết xuất không có gì:

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

vấn đề là: return (); // ở đây có một số lỗi cú pháp

Có, bạn có thể, nhưng thay vì để trống, chỉ cần quay lại nullnếu bạn không muốn renderbất cứ thứ gì từ thành phần, như thế này:

return (null);

Một điểm quan trọng khác là, bên trong JSX nếu bạn kết xuất phần tử một cách có điều kiện, thì trong trường hợp condition=false, bạn có thể trả về bất kỳ giá trị nào trong số này false, null, undefined, true. Theo DOC :

booleans (true/false), null, and undefinedlà những đứa trẻ hợp lệ , chúng sẽ bị bỏ qua nghĩa là chúng đơn giản không kết xuất.

Tất cả các JSXbiểu thức này sẽ hiển thị cùng một điều:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

Thí dụ:

Chỉ các giá trị lẻ sẽ được hiển thị, bởi vì đối với các giá trị chẵn chúng ta sẽ trả về 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' />

Một số câu trả lời hơi sai và chỉ ra phần sai của tài liệu:

Nếu bạn muốn một thành phần không hiển thị gì, chỉ cần trả về null, theo tài liệu :

Trong những trường hợp hiếm hoi, bạn có thể muốn một thành phần tự ẩn đi mặc dù nó được kết xuất bởi một thành phần khác. Để làm điều này trả về null thay vì đầu ra kết xuất của nó.

Nếu bạn cố gắng quay lại undefinedchẳng hạn, bạn sẽ gặp phải lỗi sau:

Không có gì được trả lại từ kết xuất. Điều này thường có nghĩa là một tuyên bố trở lại bị thiếu. Hoặc, để hiển thị không có gì, trả về null.

Như đã chỉ ra bởi câu trả lời khác, null, true, falsevà undefinedlà con cái có giá trị đó là hữu ích cho vẽ có điều kiện bên trong jsx của bạn, nhưng nó, bạn muốn thành phần của bạn để ẩn / làm gì, chỉ cần trở lại null.

Có, bạn có thể trả về một giá trị trống từ phương thức kết xuất React.

Bạn có thể trả lại bất kỳ điều nào sau đây: false, null, undefined, or true

Theo các tài liệu :

false, null, undefined, Và truelà con cái hợp lệ. Họ chỉ đơn giản là không kết xuất.

Bạn có thể viết

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

Tuy nhiên, return nullđược ưu tiên nhất vì nó biểu thị rằng không có gì được trả lại

Hơi lạc đề nhưng nếu bạn cần một thành phần dựa trên lớp không bao giờ kết xuất bất cứ thứ gì và bạn rất vui khi sử dụng một số cú pháp ES chưa được chuẩn hóa, bạn có thể muốn đi:

render = () => null

Về cơ bản, đây là một phương thức mũi tên hiện đang yêu cầu plugin Babel thuộc tính lớp biến đổi . React sẽ không cho phép bạn xác định một thành phần mà không có renderchức năng và đây là hình thức ngắn gọn nhất đáp ứng yêu cầu này mà tôi có thể nghĩ ra.

Tôi hiện đang sử dụng thủ thuật này trong một biến thể của ScrollToTop mượn từ react-routertài liệu. Trong trường hợp của tôi, chỉ có một phiên bản duy nhất của thành phần và nó không hiển thị bất cứ thứ gì, vì vậy một dạng "render null" ngắn rất phù hợp ở đó.

Chúng ta có thể trở lại như thế này,

return <React.Fragment />;

Trả về giá trị giả trong hàm render () sẽ không hiển thị gì. Vì vậy, bạn chỉ có thể làm

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