의 포장을 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」리액트?
오늘 ReactJs를 배우기 시작했고, 1시간 후에 문제에 직면했습니다.페이지의 div 안쪽에 2줄로 된 컴포넌트를 삽입하고 싶습니다.내가 하고 있는 일의 간단한 예를 다음에 나타냅니다.
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>
)
}
....
아래는 렌더입니다.
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>
문제는 리액트가 모든 것을 div "Dead Simple Component"로 포장하도록 강요하는 것이 그다지 기쁘지 않다는 것입니다.DOM을 명시적으로 조작하지 않고 가장 간단하고 최선의 회피책은 무엇입니까?
2017년 7월 28일 업데이트: React의 유지관리자는 React 16 베타 1에서 이 가능성을 추가했습니다.
React 16.2 이후 다음과 같이 할 수 있습니다.
render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}
이 요건은 React 버전(16.0)에서 삭제되었기 때문에 이 래퍼를 피할 수 있습니다.
리액트를 사용할 수 있습니다.부모 노드를 작성하지 않고 요소 목록을 렌더링하는 fragment. 공식 예:
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
자세한 내용은 이쪽:
업데이트 2017-12-05: React v16.2.0은 fragment의 렌더링을 완전히 지원하며, 컴포넌트 렌더 방식에서 여러 개의 하위 항목을 반환할 때 하위 키를 지정하지 않아도 지원이 향상되었습니다.
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로 묶지 않고 렌더 방식으로 반환했습니다.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>,
];
}
현시점에서는 키 경고를 피하기 위해 각 요소에 키가 필요하지만 다음 릴리스에서는 이 키가 변경될 수 있습니다.
앞으로는 키가 필요 없는 특별한 fragment 구문을 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
이 작업은 여전히 필요하지만 이제 BUT React는 추가 DOM 요소를 만들지 않고 요소를 생성해야 합니다.
추가 부모 )divcreateElement이 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 요소를 만들고 반환합니다.type 인수에는 태그 이름 문자열('div' 또는 'span' 등), React 컴포넌트 유형(클래스 또는 함수) 또는 React 프래그먼트유형을 지정할 수 있습니다.
render() {
return (
<React.Fragment>
Some text.
<h2>A heading</h2>
</React.Fragment>
);
}
이 질문에 답한 것으로 알고 있습니다.물론 React를 사용할 수 있습니다.노드를 생성하지 않는 fragment입니다만, div와 같은 것을 그룹화합니다.
또한 재미를 느끼고 싶다면 추가 div를 제거하는 React 모드를 구현할 수 있습니다(그리고 많은 것을 배울 수 있습니다). 이를 위해 리액트 코드 기반 자체에서 어떻게 할 수 있는지에 대한 훌륭한 비디오를 공유하고자 합니다.
https://www.youtube.com/watch?v=aS41Y_eyNrU
이것은 물론 실제로 할 수 있는 것은 아니지만, 좋은 학습 기회입니다.
당신은 그것을 없앨 수 없을 것이다.div요소.React.render()는 유효한 DOM 노드를 1개 반환해야 합니다.
다음은 "투과적인" 구성 요소를 렌더링하는 한 가지 방법입니다.
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>
회피책도 있습니다.다음 블록 코드는 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>
})
언급URL : https://stackoverflow.com/questions/33766085/how-to-avoid-extra-wrapping-div-in-react
'programing' 카테고리의 다른 글
| MVC4 번들, 최소화 및 각도JS 서비스 (0) | 2023.03.25 |
|---|---|
| 반응에서 클래스 전환 (0) | 2023.03.25 |
| 루팅을 지원하는 AngularJS UI 부트스트랩 탭 (0) | 2023.03.25 |
| PHP에서 jQuery ajax 호출로 데이터를 반환하는 방법 (0) | 2023.03.25 |
| AngularJ: 상수 (0) | 2023.03.25 |