modo corretto per definire un elemento dom vuoto React

Question

mando un parametro opzionale checkbox all'interno di un puntello per un componente:

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

Poi metto così:

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

Come si vede dalla sopra, assegno null alla variabile. Ma posso invece assegnare una stringa vuota '' che sembra dare lo stesso risultato.

Qual è il corretto?

Answer 1

È necessario utilizzare null. Se usi una stringa vuota come "" allora la reazione creerà un elemento dom span vuoto, quindi non è la stessa cosa.

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

Usa false, null o undefined.

Questo frammento di codice mostra il comportamento di rendere valori falsy in Reagire:

<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 e undefined non generano nulla:

<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> 

Mentre '', 0 e NaN do:

<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> 

Per comodità. è possibile generare in modo condizionale in linea contenuti se il valore si sta testando contro sarà false, null o undefined quando il contenuto condizionale non deve essere visualizzato:

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