Phản ứng rỗng là gì: *?

Question

react-empty

<div data-reactroot> 
<!-- react-empty: 3 --> 
<!-- react-empty: 26 --> 
</div> 

Nút này là gì? Tại sao nó có thể đưa đến một thành phần React? Làm thế nào để làm như thế này?

Answer 1

Điều này thực sự là một phần của React's internal support for things like null:

// A perfectly valid component 
() => null 

// Also a perfectly valid component 
const MyComponent = React.createClass({ 
    render() { 
    if (this.props.hidden) return null; 
    return <p>My component implementation</p>; 
    } 
}); 

Answer 2

Nhìn vào phần này của React mã mà là tạo này:

var nodeValue = ' react-empty: ' + this._domID + ' '; 
    if (transaction.useCreateElement) { 
     var ownerDocument = hostContainerInfo._ownerDocument; 
     var node = ownerDocument.createComment(nodeValue); 
     ReactDOMComponentTree.precacheNode(this, node); 
     return DOMLazyTree(node); 
    } else { 
     if (transaction.renderToStaticMarkup) { 
     // Normally we'd insert a comment node, but since this is a situation 
     // where React won't take over (static pages), we can simply return 
     // nothing. 
     return ''; 
     } 
     return '<!--' + nodeValue + '-->'; 
    } 
    }, 

Vì vậy, về cơ bản nếu trở lại vô thành phần của bạn, nó sẽ tạo ra một lời nhận xét hiển thị phần tử này trống, nhưng React chú ý đến việc bạn mua một chú thích ở đó <!-- react-empty: 3 --> tất cả các khuôn khổ JavaScript cố gắng sử dụng nhận xét trong DOM, để cho thấy chúng xử lý mã, tương tự như ng-if trong góc f hoặc ví dụ ...

Answer 3

Lưu ý rằng với React> = 16, bạn sẽ không thấy <!-- react-empty: X --> nữa