如何在JSX中正确使用条件逻辑切换组件样式？

方法一：内联三元表达式直接切换样式（最简洁原生） #

无需切换整个<View>标签，直接在style属性中通过三元表达式动态选择样式，这是最便捷的实现方式：

function Messages(props) {
  return (
    <View>
      <View style={styles.messageWrapper}>
        {/* 用三元表达式动态切换样式 */}
        <View style={props.isMine ? styles.isMine : styles.isNotMine}>
          <View style={styles.message}>
            <Text>{props.text}</Text>
            <Text style={styles.messageTime}>{props.time}</Text>
          </View>
        </View>
      </View>
    </View>
  );
}

export default Messages;

方法二：条件渲染完整标签（需扩展属性时使用） #

如果后续要给两种状态的<View>添加不同属性（比如不同事件、额外props），可以用完整的三元表达式包裹闭合标签：

function Messages(props) {
  return (
    <View>
      <View style={styles.messageWrapper}>
        {props.isMine ? (
          <View style={styles.isMine}>
            <View style={styles.message}>
              <Text>{props.text}</Text>
              <Text style={styles.messageTime}>{props.time}</Text>
            </View>
          </View>
        ) : (
          <View style={styles.isNotMine}>
            <View style={styles.message}>
              <Text>{props.text}</Text>
              <Text style={styles.messageTime}>{props.time}</Text>
            </View>
          </View>
        )}
      </View>
    </View>
  );
}

export default Messages;

方法三：提取子组件复用逻辑 #

若消息内容逻辑复杂，可将内部内容提取为子组件，避免重复代码：

const MessageContent = ({ text, time }) => (
  <View style={styles.message}>
    <Text>{text}</Text>
    <Text style={styles.messageTime}>{time}</Text>
  </View>
);

function Messages(props) {
  return (
    <View>
      <View style={styles.messageWrapper}>
        {props.isMine ? (
          <View style={styles.isMine}>
            <MessageContent text={props.text} time={props.time} />
          </View>
        ) : (
          <View style={styles.isNotMine}>
            <MessageContent text={props.text} time={props.time} />
          </View>
        )}
      </View>
    </View>
  );
}

export default Messages;

报错原因说明 #

你之前的写法报错是因为JSX要求标签必须严格闭合，不能只写起始标签而省略闭合部分。第一种方法是最推荐的方案，无需修改组件结构，完全利用JSX内联表达式特性实现需求。

内容的提问来源于stack exchange，提问作者Alexey