React/jsx의 3 진수에서 실제 케이스 내에서 구성 요소와 변수를 표시하는 방법은 무엇입니까?

Question

내장 된 컴포넌트와 버튼을 렌더링하는 div의 내부에 삼각형을 만들고 싶지만 구문에 오류가 있습니다. 아무도 내가 그것을 바꿀 수 있도록 내가 원하는대로 할 수있는 방법을 알고 있습니까? 그것은 Module build failed: SyntaxError: Unexpected token, expected :

으로 <WorkListBadge /> 부분에 erroring 있어요

<div> 
{thing ? <WorkListBadge /> item.resource : <button> Click Me 
</button> } 
</div> 

나는 운이 서로 다른 jsx 변화의 무리를 시도했다. 이것은 jsx 파일 내에 있습니다.

나는 완전히 반응하고 완전히 잘못된 방향으로 나아갈 수 있습니다. 미리 감사드립니다!

Answer 1

단일 엔티티는 3 진수로만 렌더링 할 수 있습니다. <div>에 두 요소를 모두 하나의 항목으로 결합하십시오. item.resource

<div> 
{thing ? <div><WorkListBadge /> {item.resource}</div> : <button> Click Me 
</button> } 
</div> 

에 대한 중괄호를 추가하는 것을 잊지 마십시오.