Program Tip

추가 포장을 피하는 방법

programtip 2020. 10. 7. 08:05
반응형

추가 포장을 피하는 방법
React에서?

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

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

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

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

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

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

divReacts 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 노드를 반환해야합니다.

다음은 "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>

enter image description here

해결 방법도 있습니다. 아래 블록 코드는 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>
})

You can accomplish this behavior by using what is known as a React.Fragment introduce in the newer versions of React , which lets you return multiple elements without the need to create a wrapper element(i.e <div>). The code would look like so:

render() {
  return (
    <React.Fragment>
      <Element1 />
      <Element2 />
    </React.Fragment>
  );
}

You can read more here. I hope that helps!

참고URL : https://stackoverflow.com/questions/33766085/how-to-avoid-extra-wrapping-div-in-react

반응형

'Program Tip' 카테고리의 다른 글

항목 X에 대한 게시 속성을 적용 할 수 없습니다.  (0) 2020.10.07
jQuery의 Grep 대 필터?  (0) 2020.10.07
CXF 또는 Spring-WS가 더 나은 프레임 워크는 무엇입니까?  (0) 2020.10.07
JavaScript에서 (function () {}) ()보다! function () {} ()의 장점은 무엇입니까?  (0) 2020.10.07
MySQL INNER JOIN은 두 번째 테이블에서 하나의 행만 선택합니다.  (0) 2020.10.07

'Program Tip'의 다른글

  • 현재글추가 포장을 피하는 방법

관련글

댓글

티스토리툴바