为什么反应原生＆lt;文字＆gt;组件不显示布尔道具？

Question

使用RN标准＆lt;文字＆gt;使用此代码的组件我看到＆＃34;调试模式：＆＃34; 仅限文本（但预期：＆＃34;调试模式：true＆＃34; ）。

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);

截图：

如上所述＆＃34; state.debug＆＃34;是布尔类型：

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

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

Answer 1

因为JSX的设计是这样的。根据{{​​3}}：

  

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>}

在true未呈现时，false无法呈现。