redux-form : 구문을 이해하는 데 도움이 필요합니다.

Question

redux-form의 비디오를 살펴 보겠습니다.

{meta.error && 
     <span> 
     {meta.error} 
     </span>} 

우리가 {} 내부 jsx 사용할 수 :

이

const renderInput = ({ input, meta, label}) => 
     <div> 
     <label>{label}</label> 
     <input {...input} /> 
     {meta.error && 
      <span> 
      {meta.error} 
      </span>} 
     </div> 

나는 아래 부분을 이해하지 못했다 : 나는 다음과 같은 코드를 발견? 여기 <span>이 {} 안에 사용됩니다. 자바 스크립트 변수 나 표현식 만 사용한다고 생각 했나요?

Answer 1

예,이 구문은 허용됩니다.
중괄호에 싸서 ... 내가이 문서의 일부를 인용 JSX

당신은 JSX에서 자바 스크립트 표현식을 포함 할 수있는

임베딩 표현을 보자. Link

JSX

너무

컴파일 후, JSX 표현은 일반 자바 스크립트 객체가 표현이다.

Link

JSX 내에서 허용 무엇에 관해서 서로 완전이 두 문장.

출력이 JS이기 때문에 다른 JSX 요소가있는 JSX 요소에 JS 블록을 재귀 적으로 포함 할 수 있습니다.
괜찮습니다. @의 gustavohenke의 대답은, 코드 세그먼트

<div> 
    <label>{label}</label> 
    <input {...input} /> 
    {meta.error && 
     <span> 
     {meta.error} 
     </span>} 
    </div> 

에 추가

Answer 2

는 meta.error 일부 값이있는 경우 조건부, meta.error의 내용 (가능하면 오류 메시지)를 포함하는 <span> 요소를 렌더링하는 데 사용됩니다. 코드는 동일한 작업을 수행하기 위해 short circuit evaluation을 사용합니다. 당신이 지금 그것을 얻을 희망!