react-native - 为什么 React Native < Text > 组件不显示 bool 属性？

Question

使用带有此代码的 RN 标准 组件我看到 “ Debug模式:” 仅文本(但预期: " Debug模式:true" )。

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”是 bool 类型:

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

问题 - 为什么 bool Prop 不显示/渲染？

Answer 1

因为 JSX 是这样设计的。根据 the React documentation :

false, null, undefined, and true are valid children. They simply don't render. These JSX expressions will all render to the same thing:

<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>    
<div>{true}</div>

...

Conversely, if you want a value like false, true, null, or undefined to appear in the output, you have to convert it to a string first:

<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 时不呈现未呈现。