Envío una checkbox de verificación de parámetro opcional dentro de un accesorio a un componente:
var checkBox = this.props.checkbox ? <span className='checkbox'></span> : null;Entonces lo pongo así:
<div> ... {checkBox} ... </div> Como se ve desde arriba, asigno nulo a la variable. Pero, en cambio, puedo asignar una cadena vacía '' que parece dar el mismo resultado.
¿Cuál es el adecuado?
Necesitas usar nulo. Si usa una cadena vacía como '', entonces reaccionar creará un elemento span dom vacío, por lo que no es lo mismo.
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>Utilice false , null o undefined .
Este fragmento muestra el comportamiento de representar valores falsos en React:
<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 no generan nada:
<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> Mientras que '' , 0 y NaN sí:
<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> Como una conveniencia. puede generar contenido condicionalmente en línea si el valor con el que está probando será false , null o undefined cuando el contenido condicional no se debe mostrar:
<div> ... {this.props.checkbox && <span className='checkbox'></span>} ... </div>