1. ホーム
  2. javascript

[解決済み] JSXでboolean値をレンダリングできない?

2023-05-24 08:26:17

質問

JSX内でboolean値をレンダリングしようとしていますが、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>

EDITです。 例のJSBinのリンクはこちらです。 http://jsbin.com/nibihodoce/1/edit?html,js,output

EDIT 2: 私はすでに.toString()の代替案を検討しましたが、私はオブジェクトの配列を反復しており、そのオブジェクトの特定のフィールドは文字列/整数/ブーリアン種類の値を持つことができるので、.toString()をすべて適用することは最適ではないようです。.toString()をすべての'emに適用することは最適ではないようです。

どのように解決するのですか?

Boolean Value: { ipsumText.toString() }

または

Boolean Value: { String(ipsumText) }

または

Boolean Value: { '' + ipsumText }

または

{`Boolean Value: ${ipsumText}`}

または

Boolean Value: { JSON.stringify(ipsumText) }

私は2番目の選択肢を好みます。普遍的で、速く、すべてのプリミティブタイプで動作します。 Boolean( smth ) , Number( smth ) .