在React中定义一个空dom元素的正确方法是什么?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (78)

我将一个可选参数发送checkbox给一个组件内的道具:

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

然后我这样说:

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

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

什么是适当的?

提问于
用户回答回答于

你需要使用null。如果你使用一个空字符串如''那么反应会创建一个空跨度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>
用户回答回答于

使用falsenullundefined

这段代码展示了在React中渲染falsy值的行为:

<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>

falsenull并且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>

然而''0NaN做到:

<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,则可以有条件地生成内联内容:nullundefined

<div>
    ...
    {this.props.checkbox && <span className='checkbox'></span>}
    ...
</div>

扫码关注云+社区

领取腾讯云代金券