cách chính xác để xác định một yếu tố dom trống trong Phản ứng

Question

tôi gửi một tham số tùy chọn checkbox bên trong một chỗ dựa để một thành phần:

var checkBox = this.props.checkbox ? <span className='checkbox'></span> : null; 

Sau đó, tôi đặt nó như thế này:

<div> 
    ... 
    {checkBox} 
    ... 
</div> 

Như đã thấy từ ở trên, tôi gán null cho biến. Nhưng thay vào đó tôi có thể gán chuỗi trống '' mà dường như cho kết quả tương tự.

Điều gì phù hợp?

Answer 1

Bạn cần sử dụng null. Nếu bạn sử dụng một chuỗi rỗng như '' thì phản ứng sẽ tạo ra một phần tử vòm rỗng, vì vậy nó không giống nhau.

var label1 = <label>My Label</label>; // react generates a label element 
var label2 = null; // react doesn't generate any dom element 
var label3 = ''; // react generates and empty span like <span></span> 

Answer 2

Sử dụng false, null hoặc undefined.

đoạn này cho thấy hành vi của render giá trị falsy trong Phản ứng:

<meta charset="UTF-8"> 
 
<script src="https://fb.me/react-0.13.2.js"></script> 
 
<script src="https://fb.me/JSXTransformer-0.13.2.js"></script> 
 
<div id="app"></div> 
 
<script type="text/jsx;harmony=true">void function() { "use strict"; 
 

 
var falsyValues = [false, 0, "" , null, undefined, NaN] 
 

 
var App = React.createClass({ 
 
    componentDidMount() { 
 
    [].slice.call(React.findDOMNode(this).childNodes) 
 
     .forEach(child => console.log(child.outerHTML)) 
 
    }, 
 
    render() { 
 
    return <div> 
 
     {falsyValues.map(falsy => <div id={'test-' + falsy}> 
 
     Before 
 
     {falsy} 
 
     After 
 
     </div>)} 
 
    </div> 
 
    } 
 
}) 
 

 
React.render(<App/>, document.getElementById('app')) 
 

 
}()</script>

false, null và undefined không tạo ra bất cứ điều gì:

<div id="test-false" data-reactid=".0.0"><span data-reactid=".0.0.0">Before</span><span data-reactid=".0.0.2">After</span></div> 
<div id="test-null" data-reactid=".0.3"><span data-reactid=".0.3.0">Before</span><span data-reactid=".0.3.2">After</span></div> 
<div id="test-undefined" data-reactid=".0.4"><span data-reactid=".0.4.0">Before</span><span data-reactid=".0.4.2">After</span></div> 

Trong khi '', 0 và NaN làm:

<div id="test-0" data-reactid=".0.1"><span data-reactid=".0.1.0">Before</span><span data-reactid=".0.1.1">0</span><span data-reactid=".0.1.2">After</span></div> 
<div id="test-" data-reactid=".0.2"><span data-reactid=".0.2.0">Before</span><span data-reactid=".0.2.1"></span><span data-reactid=".0.2.2">After</span></div> 
<div id="test-NaN" data-reactid=".0.5"><span data-reactid=".0.5.0">Before</span><span data-reactid=".0.5.1">NaN</span><span data-reactid=".0.5.2">After</span></div> 

Để thuận tiện. bạn có điều kiện có thể tạo ra nội tuyến nội dung nếu các giá trị mà bạn đang thử nghiệm chống lại sẽ false, null hoặc undefined khi nội dung có điều kiện không được hiển thị:

<div> 
    ... 
    {this.props.checkbox && <span className='checkbox'></span>} 
    ... 
</div>