この React の条件付きレンダリング式の何が問題なのでしょうか?

Question

私の UI には次の Reactjs スニペットがあり、現在は正常に動作しています。

リーリー

contact.phone フィールドが空の文字列の場合は表示されたくないです。

次のような条件付きレンダリングを実装しようとします:

リーリー

しかし、contact で「算術演算の右側は、"any"、"number"、"bigint"、または列挙型である必要があります。 」エラーが発生します。 .phone フィールド。また、次のコード スニペット (上と同じですが中括弧なし) も試しましたが、JS 行全体が UI 上の文字列としてダンプされます。

ああああ

Answer 1

条件付きレンダリング ブロックの MenuItem の構文が正しくないように見えます。これを次のように変更するとよいでしょう:

リーリー

これは、中括弧内のすべてが JS 式として解釈されるため、条件付きでレンダリングされたバージョンは "John" - "" または "John" - "555 - と同等になります。 555-5555」。レンダリングされる文字列をテンプレート文字列でラップすると、それを式として評価することを回避できます。