{this.state.text.split(' ').map((word) => word && '_<text style={{padding: 10, fontsize: 42}}> {text.s-优快云博客

本文链接：https://blog.youkuaiyun.com/baihailing/article/details/85275413

本文深入探讨了React Native中使用&&操作符进行条件渲染的原理，解析了一段具体代码实现，展示了如何根据文本内容动态展示问号，以及&&在React Native中的独特用法，类似于Java中的三元运算符。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看了一遍官网，没理解什么意思，遂百度：终于知道&&和oc 里的&&不是一回事啊！

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

class PizzaTranslator extends Component { 
  constructor(props) { 
    super(props); 
    this.state = {text:''}; 
  } 
  render() { 
    return ( 
      <View style={{padding: 10}}> 
        <TextInput 
          style={{height: 40}} 
          placeholder="Type here to translate!" 
          onChangeText={(text) => this.setState({text})} 
        /> 
        <Text style={{padding: 10, fontSize: 42}}> 
          {this.state.text.split(' ').map((word) => word && '?').join(' ')} 
        </Text> 
      </View> 
    ); 
  }
}
// 注册应用(registerComponent)后才能正确渲染
// 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);

关于{this.state.text.split(' ').map((word) => word && '?').join(' ')}这段代码，具体可以理解为，text文本先根据空格分隔成数组，再通过map方法遍历，其中map((word)=>部分,word是遍历数组的item，=>代表匿名函数,&&则表示符号前的值不为空时，返回&&后的值，可以类似理解为java中的三元运算符相似的概念