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

오늘 저는 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 />
    </>
  );
}

답변

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

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

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

더보기 : 조각

답변

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에 추가 할 것입니다.

답변

당신이 사용할 수있는:

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

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

답변

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

render: function() {
  return[
    <div className="DeadSimpleComponent__time">10:23:12</div >
    <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
  ]
}

답변

DIV없이 자식 구성 요소를 래핑하는 구성 요소를 만들었습니다. 섀도우 래퍼라고합니다 : https://www.npmjs.com/package/react-shadow-wrapper

답변

이것은 여전히 필요합니다 , 하지만 지금 반작용 추가 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>
  );
}

답변

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