どのようにこのコンポーネントがうまくレンダリング三項演算子で

Question

を変数/小道具を使用するには：

const Footer =() => { 
    let dataDiv = <div>Data is: Some data</div>; 
    return (
    <div> 
     {data ? dataDiv : ''} 
    </div> 
) 
} 

しかし、私は、テキスト変数と「いくつかのデータを」変更した場合、その後、dataDiv内のHTMLが正常にレンダリングされていませんが、として純粋なテキスト：

素敵な方法でどのように反応するか私はこれを解決することができるで

const Footer =() => { 
    let data = 'Some data'; 
    let dataDiv = <div>Data is: {data}</div>; 
    return (
    <div> 
     {data ? dataDiv : ''} 
    </div> 
) 
} 

私は表示またはそれが存在しているかいないかによって非表示にしたい、多くの異なるデータプロパティを持っていますか、？

Answer 1

これは有効な構文であり、正常に動作しますが、いくつかのことを解決するのに役立ちます。あなたがブールを使用するブール値として何かを使用することを計画したときにまず、私が推薦する

がある（）

第二に、私はあなたの代わりにrenderメソッドに空の文字列のnullを返すお勧めします。

第3に、ES6矢印関数の構文を使用しているため、文字列にテンプレートリテラルを使用できます。

const Footer =() => { 
    let data = 'Some data'; 
    let dataDiv = <div>`Data is: ${data}`</div>; 
    return (
    <div> 
     {Boolean(data) ? dataDiv : null} 
    </div> 
) 
}