React에서 빈 dom 요소를 정의하는 올바른 방법

React에서 빈 dom 요소를 정의하는 올바른 방법

선택적 매개 변수를 보냅니다.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>

언급URL : https://stackoverflow.com/questions/30097091/correct-way-to-define-an-empty-dom-element-in-react