javascript - 在 React 中定义空 dom 元素的正确方法

Question

我将一个可选参数 checkbox 在 prop 中发送给一个组件:

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

然后我这样说:

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

从上面可以看出，我将 null 分配给变量。但我可以改为分配空字符串 '' ，这似乎给出了相同的结果。

什么是正确的？

Answer 1

你需要使用null。如果你使用像 '' 这样的空字符串，那么 react 将创建一个空的 span 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>