JSX에서 부울 값을 렌더링할 수 없습니까?

JSX에서 부울 값을 렌더링할 수 없습니까?

JSX 내에서 부울 값을 렌더링하려고 하는데, React가 표현식으로 평가하고 컴포넌트가 반환된 후 아무것도 반환하지 않습니다.

이 문제를 해결할 방법이 있나요?

여기 예가 있습니다.

var ipsumText = true;

ReactDOM.render(
  <div>
     Boolean Value:    {ipsumText}
  </div>,
  document.getElementById('impl')
);

컴파일된 HTML을 다음과 같이 표시합니다.

<div data-reactid=".0"><span data-reactid=".0.0">Boolean Value:    </span></div>

편집: 다음은 예시의 JSBin 링크입니다.http://jsbin.com/nibihodoce/1/edit?html,js,output

편집 2: 이미 .toString()의 대체 방법을 탐색했습니다만, 개체의 배열에 대해 반복하고 있기 때문에 해당 개체의 특정 필드에는 문자열/정수/부울 등의 값이 있을 수 있습니다..toString()을 모든 에 적용하는 것은 최적이 아닌 것 같습니다.

Boolean Value: { ipsumText.toString() }

또는

Boolean Value: { String(ipsumText) }

또는

Boolean Value: { '' + ipsumText }

또는

{`Boolean Value: ${ipsumText}`}

또는

Boolean Value: { JSON.stringify(ipsumText) }

나는 두 번째 옵션이 더 좋다.범용, 고속, 모든 원시 유형에 대해 작동합니다.Boolean( smth ),Number( smth ).

부울 값을 문자열로 변환하여 빈 문자열로 연결할 수 있습니다.

var ipsumText = true;

ReactDOM.render(
  <div>
     Boolean Value: {ipsumText + ''}
  </div>,
  document.getElementById('impl')
);

또는 할당할 때 실행할 수 있습니다.boolvalue to variable:

var ipsumText = true + '';

ReactDOM.render(
  <div>
     Boolean Value: {ipsumText}
  </div>,
  document.getElementById('impl')
);

변수에 부울 값을 사용할 수 없는 경우 부울 값으로 변환해야 합니다.

// `ipsumText` variable is `true` now.
var ipsumText = !!'text';

<select>
    <option value={row.feature_product ? true: true || row.feature_product ? false: false}>
    {`${row.feature_product}`}
    </option>
    <option value={row.feature_product ? false: true || row.feature_product ? true: false}>
    {`${row.feature_product ? false: true}` || `${row.feature_product ? true: false}`}
    </option>
</select>

언급URL : https://stackoverflow.com/questions/38337262/cannot-render-boolean-value-in-jsx