我在一个组件的 prop 中发送了一个可选参数 checkbox
:
var checkBox = this.props.checkbox ? <span className='checkbox'></span> : null;
然后我就这样放置:
<div>
...
{checkBox}
...
</div>
从上面可以看出,我将 null 赋值给了这个变量。但是我也可以将空字符串 ''
赋值给它,这似乎会得到相同的结果。
哪一个是正确的?
我在一个组件的 prop 中发送了一个可选参数 checkbox
:
var checkBox = this.props.checkbox ? <span className='checkbox'></span> : null;
然后我就这样放置:
<div>
...
{checkBox}
...
</div>
从上面可以看出,我将 null 赋值给了这个变量。但是我也可以将空字符串 ''
赋值给它,这似乎会得到相同的结果。
哪一个是正确的?
您需要使用 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>
使用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>
{this.props.checkbox && ...}
是我正在寻找的解决方案。它是一种表达式为真时生成元素的方式。 - ToolmakerSteve
<span>
中。现在返回假值是否仍然比返回空字符串更好? - jguffey<!-- react-text: 808 --> <!-- /react-text -->
)而不是<span>
。如果需要调试,这可能会很有用。 - Aprillion