blocks|key|871|text|您需要使用null。如果你使用像'‘这样的空字符串，那么react会创建一个空span+dom元素，所以它是不一样的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|872|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>|code-block|syntax|javascript|873|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>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.</p>

<pre><code>var label1 = &lt;label&gt;My Label&lt;/label&gt;; // react generates a label element
var label2 = null; // react doesn't generate any dom element
var label3 = ''; // react generates and empty span like &lt;span&gt;&lt;/span&gt;
</code></pre>


blocks|key|935|text|使用false、null或undefined。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|936|此代码片段显示了在React中呈现假值的行为：|937|​|938|<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-'+%2B+falsy}>
++++++++Before
++++++++{falsy}
++++++++After
++++++</div>)}
++++</div>
++}
})

React.render(<App/>,+document.getElementById('app'))

}()</script>|code-block|syntax|javascript|939|940|false、null和undefined不会生成任何内容：|941|<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>|942|而''、0和NaN做的是：|943|<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>|944|为了方便起见。如果您测试的值为false、null或undefined，而条件内容不应显示，则可以有条件地生成内联内容：|945|<div>
++++...
++++{this.props.checkbox+&&+<span+className='checkbox'></span>}
++++...
</div>|946|entityMap^0|2|5|8|4|D|9|0|0|0|0|0|0|5|6|4|B|9|0|0|1|2|4|1|6|3|0|0|F|5|L|4|Q|9|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1A|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1B|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1C|8|@]|D|@]|E|$M|N]]|$1|O|3|I|5|6|7|1D|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1E|8|@$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|R|3|S|5|L|7|1L|8|@]|D|@]|E|$M|N]]|$1|T|3|U|5|6|7|1M|8|@$9|1N|A|1O|B|C]|$9|1P|A|1Q|B|C]|$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|V|3|W|5|L|7|1T|8|@]|D|@]|E|$M|N]]|$1|X|3|Y|5|6|7|1U|8|@$9|1V|A|1W|B|C]|$9|1X|A|1Y|B|C]|$9|1Z|A|20|B|C]]|D|@]|E|$]]|$1|Z|3|10|5|L|7|21|8|@]|D|@]|E|$M|N]]|$1|11|3|-4|5|6|7|22|8|@]|D|@]|E|$]]]|12|$]]

<p>Use <code>false</code>, <code>null</code> or <code>undefined</code>.</p>

<p>This snippet shows the behaviour of rendering falsy values in React:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;meta charset="UTF-8"&gt;
&lt;script src="https://fb.me/react-0.13.2.js"&gt;&lt;/script&gt;
&lt;script src="https://fb.me/JSXTransformer-0.13.2.js"&gt;&lt;/script&gt;
&lt;div id="app"&gt;&lt;/div&gt;
&lt;script type="text/jsx;harmony=true"&gt;void function() { "use strict";

var falsyValues = [false, 0, "" , null, undefined, NaN]

var App = React.createClass({
  componentDidMount() {
    [].slice.call(React.findDOMNode(this).childNodes)
      .forEach(child =&gt; console.log(child.outerHTML))
  },
  render() {
    return &lt;div&gt;
      {falsyValues.map(falsy =&gt; &lt;div id={'test-' + falsy}&gt;
        Before
        {falsy}
        After
      &lt;/div&gt;)}
    &lt;/div&gt;
  }
})

React.render(&lt;App/&gt;, document.getElementById('app'))

}()&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p><code>false</code>, <code>null</code> and <code>undefined</code> don't generate anything:</p>

<pre><code>&lt;div id="test-false" data-reactid=".0.0"&gt;&lt;span data-reactid=".0.0.0"&gt;Before&lt;/span&gt;&lt;span data-reactid=".0.0.2"&gt;After&lt;/span&gt;&lt;/div&gt;
&lt;div id="test-null" data-reactid=".0.3"&gt;&lt;span data-reactid=".0.3.0"&gt;Before&lt;/span&gt;&lt;span data-reactid=".0.3.2"&gt;After&lt;/span&gt;&lt;/div&gt;
&lt;div id="test-undefined" data-reactid=".0.4"&gt;&lt;span data-reactid=".0.4.0"&gt;Before&lt;/span&gt;&lt;span data-reactid=".0.4.2"&gt;After&lt;/span&gt;&lt;/div&gt;
</code></pre>

<p>Whereas <code>''</code>, <code>0</code> and <code>NaN</code> do:</p>

<pre><code>&lt;div id="test-0" data-reactid=".0.1"&gt;&lt;span data-reactid=".0.1.0"&gt;Before&lt;/span&gt;&lt;span data-reactid=".0.1.1"&gt;0&lt;/span&gt;&lt;span data-reactid=".0.1.2"&gt;After&lt;/span&gt;&lt;/div&gt;
&lt;div id="test-" data-reactid=".0.2"&gt;&lt;span data-reactid=".0.2.0"&gt;Before&lt;/span&gt;&lt;span data-reactid=".0.2.1"&gt;&lt;/span&gt;&lt;span data-reactid=".0.2.2"&gt;After&lt;/span&gt;&lt;/div&gt;
&lt;div id="test-NaN" data-reactid=".0.5"&gt;&lt;span data-reactid=".0.5.0"&gt;Before&lt;/span&gt;&lt;span data-reactid=".0.5.1"&gt;NaN&lt;/span&gt;&lt;span data-reactid=".0.5.2"&gt;After&lt;/span&gt;&lt;/div&gt;
</code></pre>

<p>As a convenience. you can conditionally generate content inline if the value you're testing against will be <code>false</code>, <code>null</code> or <code>undefined</code> when the conditional content shouldn't be displayed:</p>

<pre><code>&lt;div&gt;
    ...
    {this.props.checkbox &amp;&amp; &lt;span className='checkbox'&gt;&lt;/span&gt;}
    ...
&lt;/div&gt;
</code></pre>


<p>I send an optional parameter <code>checkbox</code> inside a prop to a component:</p>

<pre><code>var checkBox = this.props.checkbox ? &lt;span className='checkbox'&gt;&lt;/span&gt; : null;
</code></pre>

<p>Then I put it like this:</p>

<pre><code>&lt;div&gt;
    ...
    {checkBox}
    ...
&lt;/div&gt;
</code></pre>

<p>As seen from above, I assign null to the variable. But I can instead assign empty string <code>''</code> which seems to give the same result.</p>

<p>What's the proper one?</p>


Correct way to define an empty dom element in React

我在一个属性中向一个组件发送了一个可选参数checkbox：var checkBox = this.props.checkbox ? <span className='checkbox'></span> : null;然后我这样说：<div>    ...    {checkBox}    ...</div>从上面可以...

问在React中定义空dom元素的正确方法
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在React中定义空dom元素的正确方法EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在React中定义空dom元素的正确方法
EN