在React中定义空dom元素的正确方法
在React中定义空dom元素的正确方法
提问于 2015-05-07 17:31:29
我在一个属性中向一个组件发送了一个可选参数checkbox：
var checkBox = this.props.checkbox ? <span className='checkbox'></span> : null;然后我这样说：
<div>
...
{checkBox}
...
</div>从上面可以看出，我将null赋值给变量。但是我可以指定空字符串''，这似乎也会给出相同的结果。
什么才是正确的？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-05-07 17:57:33
您需要使用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>Stack Overflow用户
发布于 2015-05-07 18:36:56
使用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>
false、null和undefined不会生成任何内容：
<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>而''、0和NaN做的是：
<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>为了方便起见。如果您测试的值为false、null或undefined，而条件内容不应显示，则可以有条件地生成内联内容：
<div>
...
{this.props.checkbox && <span className='checkbox'></span>}
...
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30097091
复制相关文章
相似问题