爲什麼React Native < Text >組件不顯示布爾道具？

使用RN標準< Text> component with this code我看到「Debug mode：」 text only（but expected：「Debug mode：true」）。爲什麼React Native < Text >組件不顯示布爾道具？

class ClassName extends Component { 

    static propTypes = { 
    debug: PropTypes.bool 
    }; 

    render() { 
    return (
     <View style={...}> 
     <Text>Debug mode: {this.props.debug}</Text> 
     </View> 
    ) 
    } 
} 

const mapStateToProps = (state) => { 
    console.log(typeof(state.debug); //boolean 
    return { 
    debug: state.debug 
    } 
} 

export default connect(mapStateToProps)(ClassName);

截圖：

如以上「state.debug」中描述的是布爾類型：

console.log(typeof(state.debug)); //boolean

的問題 - 爲什麼布爾道具不顯示/呈現的？

來源

2017-04-20 Stich

「debug：String（state.debug）」解決了這個問題，但問題仍然存在。 – Stich

因爲JSX是這樣設計的。據the React documentation：

false，null，undefined和true是有效的兒童。他們根本不渲染。這些JSX表達式將全部呈現到同一件事：
<div /> 
<div></div> 
<div>{false}</div> 
<div>{null}</div> 
<div>{undefined}</div>  
<div>{true}</div> 
...

相反，如果你想有一個類似的值false，true，null，或undefined出現在輸出中，你必須它轉換爲字符串第一：
<div> 
    My JavaScript variable is {String(myVariable)}. 
</div> 

，所以它不是隻有大約陣營本土。這就是React的工作原理。

我不知道有關這個設計決定的原因，但它是非常方便的是false不會被渲染爲條件呈現：

{items.length > 0 && <ul>{items.map(item => <li>{item}</li>)}</ul>}

而且它是有道理的，當false不是true不會被渲染渲染。

來源

2017-04-20 22:03:44

謝謝你的詳細解釋和例子。 – Stich

爲什麼React Native < Text >組件不顯示布爾道具？

回答

相關問題