Javascript 在 React 中定义空 dom 元素的正确方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30097091/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Correct way to define an empty dom element in React
提问by Sergei Basharov
I send an optional parameter checkboxinside a prop to a component:
我将checkboxprop 内的可选参数发送到组件：
var checkBox = this.props.checkbox ? <span className='checkbox'></span> : null;
Then I put it like this:
然后我是这样写的：
<div>
...
{checkBox}
...
</div>
As seen from above, I assign null to the variable. But I can instead assign empty string ''which seems to give the same result.
从上面可以看出，我将 null 分配给变量。但我可以改为分配空字符串''，这似乎给出了相同的结果。
What's the proper one?
什么是合适的？
回答by Jose Mato
You need to use null. If you use an empty string like '' then react will create an empty span dom element, so it's not the same.
您需要使用空值。如果你使用像 '' 这样的空字符串，那么 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>
回答by Jonny Buchanan
Use false, nullor undefined.
使用false,null或undefined。
This snippet shows the behaviour of rendering falsy values in React:
这段代码展示了在 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, nulland undefineddon't generate anything:
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>
Whereas '', 0and NaNdo:
而''，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>
As a convenience. you can conditionally generate content inline if the value you're testing against will be false, nullor undefinedwhen the conditional content shouldn't be displayed:
作为一种方便。如果您测试的值是false，null或者undefined不应该显示条件内容，则可以有条件地生成内联内容：
<div>
...
{this.props.checkbox && <span className='checkbox'></span>}
...
</div>
