Правильный способ определения пустого элемента dom в React

Я посылаю необязательный параметр checkbox внутри оповещения к компоненту:

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

Затем я делаю следующее:

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

Как видно из вышеизложенного, я присваиваю значение null переменной. Но я могу вместо этого назначить пустую строку '', которая, похоже, дает тот же результат.

Какой правильный?

Ответ 1

Вам нужно использовать null. Если вы используете пустую строку типа '', тогда реакция создаст пустой элемент dom dom, поэтому он не будет таким же.

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>

Ответ 2

Используйте false, null или undefined.

Этот фрагмент показывает поведение рендеринга значений ложности в 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>