홈>
새로운 반응을 보였으며이 문제가 발생했습니다 :
render: function(){
return (
<h3>Account</h3>
<a href="#" onClick={some_event}>Login</a>
<a href="#" onClick={some_event}>Logout</a>
)}
이처럼 렌더링 할 때
multiple components must wrapt with end
와 같은 오류가 발생합니다.
각 html 태그 또는 각 줄에 대해 하나의 componenet을 만들어야합니까, 아니면 그런 식으로 렌더링 할 수 있습니다.
모든 제안?
- 답변 # 1
- 답변 # 2
쉼표로 구분 된 요소 배열을 반환합니다.
render: function(){ return ([ <h3>Account</h3>, <a href="#" onClick={some_event}>Login</a>, <a href="#" onClick={some_event}>Logout</a> ]) }
- 답변 # 3
React 16.2+의 조각에 다음 구문을 사용할 수 있습니다 :
render() { return ( <> <ChildA /> <ChildB /> <ChildC /> </> ); }
- 답변 # 4
React.render는 DOM 요소를 반환하는 JavaScript 함수입니다. JavaScript에서 함수는 여러 표현식을 리턴 할 수 없으므로 React에서 여러 요소를 리턴 할 수 없습니다. 이 함수는 "return"키워드 바로 다음에 첫 번째 표현식을 반환 한 다음 함수가 종료됩니다. 이것이 우리가 이것을 할 수있는 이유입니다 :
if (1) { 1을 반환 } return 2
- 답변 # 5
몇 가지 옵션이 있습니다 :
<올>어떤
<div></div>
에 그것을 마무리 또는<section></section>
. 와이즈 비즈 단일 요소를 반환해야합니다.분할 할 수 있고
render()
에서 더 잘되고 좋은 전용 로직을 구현하는 여러 구성 요소를 가질 수 있습니다.React
관련 자료
- 나는 이것에 문제가있다 어떻게 내가 c의 배열 안에 여러 문자를 쓸 수 있습니까?
- flutter - 나는 then 내부로 돌아갈 수 없습니다
- javascript - 동적 데이터 테이블 내의 요소에 대한 이벤트를 어떻게 포착합니까?
- javascript - 사용자가 요소를 만들 때 여러 요소의 outerHTML 표시
- javascript - 객체 내부의 여러 배열을 단일 배열로 병합
- javascript - React에서 div 태그 내부의 배열 요소를 하나씩 순환하는 방법
- list - 왜 pop () 함수가 파이썬의 함수 내부에서 값을 반환하지 않습니까?
- javascript - 배열을 배열로 푸시 한 다음 내부 요소 처리
- c# - 행렬의 선택된 요소를 다음으로 반환
- c # - c #의 배열에서 선택한 요소 반환
- jquery - 선택한 여러 데이터 속성과 일치하는 요소 표시
- python - FOR 루프의 여러 목록에서 여러 요소를 인쇄하는 방법은 무엇입니까?
- Haskell - haskell - 목록 목록 내의 목록에 추가하고 업데이트 된 목록 목록을 반환합니다
- wordpress - 단축 코드 속성에 여러 값 반환
- MongoDB C # 드라이버로 프로젝션 내에서 여러 중첩 수준을 사용할 수 있습니까?
- dataframe - df1의 여러 열 요소를 R의 array1 값과 일치시키는 방법은 무엇입니까?
- node.js - 몽구스로 다른 객체 배열의 마지막 항목을 반환
- python - 튜플 목록의 고유 요소를 다른 튜플으로 반환하는 방법
- javascript - Firebase 데이터베이스 내부의 반환에서 데이터를 가져 오지 않음
- ios - 배열 내부를 검색하고 검색된 모든 데이터를 반환하는 방법
트렌드
- OpenCv의 폴더에서 여러 이미지 읽기 (python)
- 파이썬 셀레늄 모든 "href"속성 가져 오기
- html - 자바 스크립트 - 클릭 후 변경 버튼 텍스트 변경
- javascript - 현재 URL에서 특정 div 만 새로 고침/새로 고침
- JSP에 대한 클래스를 컴파일 할 수 없습니다
- git commit - 자식 - 로컬 커밋 된 파일에 대한 변경을 취소하는 방법
- jquery - JavaScript로 현재 세션 값을 얻으시겠습니까?
- JavaScript 변수를 HTML div에 '출력'하는 방법
- javascript - swiperjs에서 정지, 재생 버튼 추가
- python - 문자열에서 특정 문자 제거
Reactrender
메소드는 단일 루트 노드 만 렌더링 할 수 있습니다. (업데이트 :v16에서 변경되었습니다 (아래 참조)). 귀하의 경우에는 3 개의 노드를 반환합니다. 이 문제를 해결하려면 3 개의 노드를 단일 루트 노드로 래핑 할 수 있습니다.
React v16에서는render()
가 가능합니다. 요소 배열을 반환합니다.다른 배열과 마찬가지로 주요 경고를 피하려면 각 요소에 키를 추가해야합니다.
또 다른 옵션은 조각을 사용하는 것입니다. 조각을 사용하면 DOM에 추가 노드를 추가하지 않고도 하위 목록을 그룹화 할 수 있습니다.
짧은 문법도 있습니다 (
<>
) 조각 선언 :