如何使用變量/道具三元操作

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

這是有效的語法和工作正常，但有一些事情來幫助清理它。

首先，我建議是當你打算使用的東西作爲一個布爾值使用布爾（）

其次，我建議你返回null，而不是在渲染方法一個空字符串。

第三，由於您使用的是ES6箭頭函數語法，因此可以使用字符串的模板文字。

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