Question

当我学习React Native时，我遇到了这样的例子：

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showView: true,
    }
  }

  removeView(){
     this.setState({
       showView: false,
     });
  }

  render(){
    return (
       <View style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       {this.state.showView && (
            <View style={{backgroundColor: 'red', height: 100, width: 100 }}> // View to be removed
                <TouchableHighlight onPress={() => this.removeView()}>
                  <Text>Remove View</Text>
                </TouchableHighlight>
            </View>
       )}
       </View>
    )
  }
}

我不明白为什么View可以this.state.showView以这种方式控制，我确定它肯定与布尔短路有关，但我认为其中的内容括号应该计算为布尔值，所以我应该只能在组件上使用true / false值而不是查看View的内容。有人可以解释一下它的工作原理吗？

Answer 1

根据React文档：

它的工作原理是因为在JavaScript中，expression始终求值为   false && expression，false始终评估为true。

因此，如果条件为&&，则false之后的元素将会出现   出现在输出中。如果是base_path();，则React会忽略并跳过它。

通过布尔短路查看控制

1 个答案: