"쉼표 연산자의 왼쪽..렌더링의 html 내용에 오류가 있습니다.

"쉼표 연산자의 왼쪽..렌더링의 html 내용에 오류가 있습니다.

간단한 프로세스

원하는 오리진 렌더링 메서드는 다음과 같습니다(테이블을 div 바깥쪽에 둡니다).

jsx 컴파일러는 어떤 이유로 그것을 허용하지 않습니까?

테이블을 div 엘리먼트 안쪽으로 옮기면 모든 것이 정상으로 보입니다.

그래서 diff만이 식탁의 장소이다.왜 jsx가 이 과정을 방해하는가? 왜 필요한가?

인JSX반품할 수 있는 것은 1개뿐입니다.html에서 요소화하다.return여러 요소를 반환할 수 없습니다.여러 요소를 반환하려면 모든 html 코드를 에 랩합니다.div또는 다른 래퍼 컴포넌트에 의한 것입니다.

첫 번째 케이스에서도 동일한 현상이 발생하고 있으며, 2개의 요소, 1개의 요소를 반환해야 합니다.div그리고 하나table한 번에 포장할 때div모든 것이 제대로 작동하고 있습니다.

동일한 규칙을 따라야 합니다.conditional rendering컴포넌트 중 하나입니다.

예:

정답:

{ 1==1 /* some condition */ ? 
    <div>
        True
    </div> 
: 
    <div>
        False
    </div>
}

틀렸다:

{ 1==1 /* some condition */ ? 
    <div>
        True 1
    </div>
    <div>
        True 2
    </div> 
: 
    <div>
        False 1
    </div>
    <div>
        False 2
    </div>
}

간단한 업데이트입니다.React v16.2.0 이후를 사용하는 경우 Fragments도 사용할 수 있습니다.

  return (
    <>
        <div>
            True 1
        </div>
        <div>
            True 2
        </div> 
    </>
  );

저도 비슷한 질문에 좀 더 깊이 있게 답변했습니다.

이 에러의 또 다른 원인은 실수로 세미콜론이 아닌 쉼표로 행이 끝나는 것입니다.이것은 코드 리팩터링 중에 실수를 했기 때문에 발생할 수 있습니다.

이것들은 오류를 일으킨다.

return <div>hi</div>, // error
return (<div>hi</div>,) // error

정답은 다음과 같습니다.

return <div>hi</div>; // ok
return (<div>hi</div>) // ok
return (<div>hi</div>); // ok

이 오류는 콤마 대신 JSX 블록 전체를 강조 표시하기 때문에 이 경우 더 결합됩니다.

이 오류는 콤마가 배열, 개체 등에서 쉼표가 아닌 "쉼표 연산자"로 해석될 때 발생합니다.

쉼표 연산자는 쉼표로 구분된 각 식을 평가하고 마지막 값을 반환합니다.

const foo = (1, 2, 3) // returns 3

이 예에서는 3이 foo에 할당됩니다.그러나 저자 생각(1, 2, 3)은 비단뱀 태플처럼 할당될 가능성이 높다.이 에러는 존재합니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

따라서 이 오류가 발생한 경우 어레이/개체 등에 오류가 있을 수 있으며 "comma operator"로 해석됩니다.

이 에러의 원인이 되는 코드 예.

const foo = (expr) => {
  const bar = ""
  const baz = ""

  switch (expr) {
    case 'Oranges', 'Mangoes': // error, you can't use comma for switch
      break;
    case 'Papayas':
      break;
  }


  { bar, baz } // You forgot to write return. Javascript thinks this is comma operator.
}

언급URL : https://stackoverflow.com/questions/41829146/left-side-of-comma-operator-error-in-html-content-of-render