React.render() 내의 여러 요소를 반환합니다.

React.render() 내의 여러 요소를 반환합니다.

대응이 처음이어서 다음과 같은 문제가 발생했습니다.

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 태그 또는 각 행에 대해 하나의 컴포넌트넷을 작성해야 합니까?또는 그렇게 렌더링할 수 있습니다.

제안해 주실 수 있나요?

리액트 <v16.0에서는render메서드는 단일 루트 노드만 렌더링할 수 있습니다.(업데이트: 이것은 v16에서 변경되었습니다.아래 참조).이 경우 노드 3개를 반환해야 합니다.이를 회피하려면 3개의 노드를 1개의 루트노드로 랩합니다.

render: function(){
  return (
    <div>
      <h3>Account</h3>
      <a href="#" onClick={some_event}>Login</a>
      <a href="#" onClick={some_event}>Logout</a>
    </div>
)}

React v16에서는render()요소 배열을 반환합니다.

다른 어레이와 마찬가지로 키 경고를 피하기 위해 각 요소에 키를 추가해야 합니다.

render() {
  return [
    <ChildA key="key1" />,
    <ChildB key="key2" />,
    <ChildC key="key3" />,
  ];
}

다른 옵션은 fragment를 사용하는 것입니다.fragment를 사용하면 DOM에 노드를 추가하지 않고 하위 목록을 그룹화할 수 있습니다.

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

짧은 구문도 있습니다(<>fragment를 선언하는 경우:

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

요소의 배열을 쉼표로 구분하여 반환합니다.

render: function(){
  return ([
    <h3>Account</h3>,
    <a href="#" onClick={some_event}>Login</a>,
    <a href="#" onClick={some_event}>Logout</a>
  ])
}

React 16.2+ 의 fragment에는, 다음의 구문을 사용할 수 있습니다.

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

React.render는 DOM 요소를 반환하는 JavaScript 함수입니다.JavaScript에서는 함수가 여러 식을 반환할 수 없기 때문에 React에서는 여러 요소를 반환할 수 없습니다.함수는 "return" 키워드 직후에 첫 번째 식을 반환하고 함수를 정지합니다.이 때문에, 다음과 같이 할 수 있습니다.

if(1) {return 1 } return 2

몇 가지 옵션이 있습니다.

1. 그냥 아무렇게나 싸서<div></div>또는<section></section>.render()는 단일 요소를 반환해야 합니다.

2. 이를 분할하여 전용 로직을 구현하는 컴포넌트를 여러 개 가질 수 있습니다.이러한 로직은 기존보다 우수하며,React

언급URL : https://stackoverflow.com/questions/34893506/return-multiple-elements-inside-react-render