Question

我使用一个简单的演示来学习反应原生，我发现了一件奇怪的事情。

这是我的代码：

export default class App extends Component {

  constructor(props) {
    super(props)
    this.state = {success: false}
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js.
          {this.state.success}        //this line can not be shown
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

我在constructor()中使用设置状态但在render()中无法访问它，当我将success值设置为字符串或int时，它将显示。

我的代码有什么问题吗？为什么我不能使用布尔值？

Answer 1

您正在访问它，但没有显示任何内容，因为它是布尔值，而不是字符串或数字。

如果你想显示文字＆＃34; true＆＃34;或＆＃34;假＆＃34;您应该首先使用toString()将其转换为字符串：

<Text style={styles.instructions}>
  To get started, edit App.js.
  {this.state.success.toString()}
</Text>

如果我没记错的话，我读到他们决定不渲染布尔值以支持更灵活的内联条件。

短路评估就是这样一个例子：

{!this.state.success && <p>Whoops, something went wrong!</p>}

如果success为真，则无法呈现上述消息。然而，在vanilla JS中，这将返回字符串文字＆＃34; false＆＃34; - 在示例中，您希望渲染某些内容或 时不理想。

想象一下，如果渲染某个对象方法的返回值（即indexOf()，map()等）并且为 undefined 呈现字符串文字，会有多烦人， null 和其他虚假值。这不会发生;相反，React什么都不做。

官方文档here中的更多信息：

false，null，undefined和true是有效的孩子。他们根本就不渲染。这些JSX表达式将呈现相同的东西：

本机不能在组件状态中使用布尔值

1 个答案: