为什么 React Native <Text> 组件不显示布尔道具？

【问题标题】：Why React Native < Text > component does not show Boolean props?为什么 React Native <Text> 组件不显示布尔道具？
【发布时间】：2017-09-17 17:00:22
【问题描述】：

使用带有此代码的 RN 标准组件，我只看到 “调试模式：” 文本（但预期：“调试模式：真”）。 p>

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

问题 - 为什么布尔道具不显示/渲染？

【问题讨论】：

"debug: String(state.debug)" 解决了这个问题，但问题依然存在。

标签： react-native

【解决方案1】：

因为 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 Native。这就是 React 的工作原理。

我不确定这个设计决定的原因，但是false 不为条件渲染而渲染很方便：

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

当false 没有被渲染时，true 没有被渲染是有道理的。

【讨论】：

感谢您的详细解释和示例。