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

Question

使用带有此代码的RN标准<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

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

Answer 1

因为JSX的设计是这样的.根据React文档:

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不渲染.