React에서 추가 래핑 <div>를 피하는 방법은 무엇입니까?

113

오늘 저는 ReactJS를 배우기 시작했고 한 시간 후에 문제에 직면했습니다. 페이지의 div 안에 두 개의 행이있는 구성 요소를 삽입하고 싶습니다. 아래에서 수행하는 간단한 예제입니다.

html이 있습니다.

<html>
..
  <div id="component-placeholder"></div>
..
</html>

다음과 같은 렌더링 기능 :

...
render: function() {

    return(
        <div className="DeadSimpleComponent">
            <div className="DeadSimpleComponent__time">10:23:12</div >
            <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
        </div>
    )
}
....

그리고 아래에서 render를 호출합니다.

ReactDOM.render(<DeadSimpleComponent/>, document.getElementById('component-placeholder'));

생성 된 HTML은 다음과 같습니다.

<html>
..
  <div id="component-placeholder">
    <div class="DeadSimpleComponent">
            <div class="DeadSimpleComponent__time">10:23:12</div>
            <div class="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
    </div>
</div>
..
</html>

React가 모든 것을 div "DeadSimpleComponent"로 래핑하도록 강요하는 것이별로 행복하지 않은 문제입니다. 명시적인 DOM 조작없이 가장 좋고 간단한 해결 방법은 무엇입니까?

2017 년 7 월 28 일 업데이트 : React의 메인테이너가 React 16 Beta 1에서 그 가능성을 추가했습니다.

React 16.2 부터 다음 과 같이 할 수 있습니다.

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}
javascript  reactjs 
— 키릴 레즈 니 코프
소스
4
완벽한 명명 연습 ;-)
— 키릴 Reznikov
HTML 파일을 볼 수 있습니까? 나는 당신의 질문을 잘못 읽었습니다. 그래도 해결 방법이있을 수 있습니다.
— Louis93
이 같은 매끄러운 : jsfiddle.net/qawumm3v
— 키릴 Reznikov
단일 요소가있는 구성 요소에 문제가 있습니까? 정말?
— Dominic
무슨 말이야? 나는 단지 React를 시도하고있다. 그것은 매우 복잡하지 않아야한다. 그러나 제한은 성가 시게 보인다.
— Kirill Reznikov 2015

답변:

142

이 요구 사항은 React 버전 (16.0)] 1 에서 제거되었으므로 이제 해당 래퍼를 피할 수 있습니다.

React.Fragment를 사용하여 부모 노드를 만들지 않고도 요소 목록을 렌더링 할 수 있습니다. 공식 예 :

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

더보기 : 조각

— 루거
소스
1
좋은 소식 DmitryUlyanets. 출시 예정일이 있나요?
— Jonas Carlbaum
2017 년 9 월 26 일부터 출시되었습니다. reactjs.org/blog/2017/09/26/react-v16.0.html
— Tom
56

2017-12-05 업데이트 : React v16.2.0은 이제 자식에 키를 지정하지 않고 구성 요소 렌더링 메서드에서 여러 자식을 반환하는 지원을 개선하여 조각 렌더링을 완전히 지원합니다.

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

v16.2.0 이전의 React 버전을 사용 <React.Fragment>...</React.Fragment>하는 경우 대신 사용할 수도 있습니다 .

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

실물:

React v16.0은 div에 래핑하지 않고 render 메서드에서 요소 배열을 반환하는 기능을 도입했습니다. https://reactjs.org/blog/2017/09/26/react-v16.0.html

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

현재 키 경고를 피하기 위해 각 요소에 키가 필요하지만 이는 향후 릴리스에서 변경 될 수 있습니다.

앞으로 우리는 키가 필요없는 특별한 조각 구문을 JSX에 추가 할 것입니다.

— 톰
소스
<> </>의 새로운 속기 구문은 훌륭합니다. 그러나 나는 여전히 그것에 대해 많은 엇갈린 감정을 가지고 있습니다.
— Thulani Chivandikwa
@ThulaniChivandikwa 속기 구문에 대한 불만을 표명 하시겠습니까?
— Tom
1
빈 태그가 JSX에서 이상하고 그것이 무엇을하는지 정확히 알지 못한다면 그다지 직관적이지 않다는 개념에 더 가깝다고 생각합니다.
— Thulani Chivandikwa
7

당신이 사용할 수있는:

render(){
    return (
        <React.Fragment>
           <div>Some data</div>
           <div>Som other data</div>
        </React.Fragment>
    )
}

자세한 내용은 이 설명서를 참조하십시오 .

— 롤란도 신 트론
소스
3

() 대신 []를 사용하여 전체 반환을 감 쌉니다.

render: function() {
  return[
    <div className="DeadSimpleComponent__time">10:23:12</div >
    <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
  ]
}
— 마이클 쿠 네오
소스
1

이것은 여전히 필요합니다 , 하지만 지금 반작용 추가 DOM 요소를 생성하지 않고 요소를 생성해야합니다.

여분의 포장 (일반적으로 필요한 부모 div) 반응으로 인해 createElement방법이 필요 type하다 파라미터 either a tag name string (such as 'div' or 'span'), a React component type (a class or a function). 그러나 이것은 그들이 React를 도입하기 전이었습니다 Fragment.

createElement에 대해서는이 새로운 API 문서를 참조하십시오.

React.createElement : 주어진 유형의 새로운 React 요소를 생성하고 반환합니다. 유형 인수는 태그 이름 문자열 (예 : 'div'또는 'span'), React 구성 요소 유형 (클래스 또는 함수) 또는 React 조각 유형일 수 있습니다.

공식적인 예제 인 Refer React.Fragment가 있습니다.

render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}
— 초기
소스
0

해당 div요소를 제거 할 수 없습니다 . React.render ()는 하나의 유효한 DOM 노드를 반환해야합니다.

— 헨릭 안데르손
소스
div는 무시되고 Knockout.JS는 동일한 작업을 수행합니다. 구성 요소의 바깥 부분에 스타일이 지정되지 않은 div가 있으면 아무 효과가 없습니다.
— Chris Hawkes
16
@ChrisHawkes, 동의하지 않습니다. 하나의 래퍼 div는 CSS 선택기에 영향을 미칩니다.
— Downhillski
의미 론적 요소로 작업 할 때 완전히 React 구성 요소가되고 싶지 않은 경우 이것은 문제가됩니다. 머리글과 바닥 글 요소가있는 섹션 태그가 있고 그 사이에 React 내에서 사용하고 싶지 않은 Google지도 컨테이너가 있다고 가정 해 보겠습니다. 그런 다음 React 구성 요소 내부에 추가 div : s를 포함하지 않고도 헤더를 React 구성 요소로 사용하고 Footer를 React 구성 요소로 사용하는 것이 좋을 것입니다. 당신 출력 ...
— 조나스 Carlbaum
0

다음은 "transculent"구성 요소를 렌더링하는 한 가지 방법입니다.

import React from 'react'

const Show = (props) => {
  if (props.if || false) {
    return (<React.Fragment>{props.children}</React.Fragment>)
  }
  return '';
};

----


<Show if={yomama.so.biq}>
    <img src="https://yomama.so.biq">
    <h3>Yoamama</h3>
<Show>

여기에 이미지 설명 입력

— Ярослав Рахматуллин
소스
0

해결 방법도 있습니다. 아래 블록 코드는 React.Fragment없이 조각을 생성합니다.

return [1,2,3].map(i=>{
if(i===1) return <div key={i}>First item</div>
if(i===2) return <div key={i}>Second item</div>
return <div key={i}>Third item</div>
})
— 에르 판 세이 디 푸어
소스
0

이 질문에 대한 답을 알고 있습니다. 물론 노드를 생성하지 않는 React.Fragment를 사용할 수 있지만 div와 같은 항목을 그룹화 할 수 있습니다.

또한 재미를 원한다면 추가 div를 제거하는 React 모드를 구현 (그리고 많은 것을 배울 수 있음) 할 수 있으며,이를 위해 React 코드베이스 자체에서 어떻게 할 수 있는지에 대한 훌륭한 비디오를 공유하고 싶습니다.

https://www.youtube.com/watch?v=aS41Y_eyNrU

물론 이것은 당신이 실제로 할 일이 아니지만 좋은 학습 기회입니다.

— 가브리엘 P.
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.