.jsxファイルがあります。
<p_grid>
<RangeSpan>
Currently, there are {" "}
<b>{Math.round(house.records * 100) / 100} houses</b> found.
</RangeSpan>
</p_grid>
これは正常に機能しますがhouse.source
、次のようなさまざまなものを調べて表示したいと思います。
if ({house.source}=="X")
{
Currently, there are {" "} <b>{Math.round(house.records * 100) / 100} houses</b> found.
}
else
{
different calculation and text.
}
house.source
OKを表示できますが、ifステートメントの実行方法がわかりません。任意のヘルプは高く評価されるように、これに完全に新しい(私は、三項演算子を使用してみましたが、とそれを組み合わせる方法がわからない{}
と""
、あるいはそれのこの文脈での使用にOKです)。
JSXでif
/else
ステートメントを直接使用することはできませんが、次のようにすることができます。
<p_grid>
<RangeSpan>
{
house.source === "X"
&& (<>Currently, there are {" "} <b>{Math.round(house.records * 100) / 100} houses</b> found.</>)
}
{
house.source !== "X"
&& (<>different calculation and text.</>)
}
</RangeSpan>
</p_grid>
これは、TKolの回答に見られるように、3進数として表現することもできます。
それよりも複雑な場合は、実際のJSX returnステートメントの外でrenderメソッド(または機能コンポーネント)の上位に計算を移動したり、機能を独自のコンポーネントにカプセル化したりすることができます(Prebiustaの答えはこの良い例です)アプローチ)。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加