React Native待办事项应用实现任务状态切换时遭遇JSX语法错误求助

嘿，我一眼就揪出你代码里的问题啦！那个JSX value should be either an expression or a quoted JSX text错误，根源就在TouchableOpacity的style属性写法不符合JSX语法规范。

错误原因拆解 #

你原来的代码里这一行：

<TouchableOpacity style=[{backgroundColor pressed ? '#ff3126' : 'green'}, styles.taskStatus] onPress={() => onPressHandler()}>

有两个关键问题：

1. JSX中插入JavaScript表达式（比如数组、对象）必须用**大括号{}**包裹，你直接写style=[...]是不合法的
2. 内联样式对象里的backgroundColor后面缺了冒号:，这是JavaScript对象键值对的基本语法要求

修正后的完整代码 #

我帮你把代码改好，顺便优化了onPress的写法（不需要额外嵌套箭头函数），还加了状态对应的文字切换，体验更完整：

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

const Task = (props) => { 
  const [pressed, setPressed] = useState(false); 
  const onPressHandler = () => { 
    setPressed(!pressed); 
  }; 

  return ( 
    <View style={styles.wrapper}> 
      <Text style={styles.taskList}>{props.text}</Text> 
      <TouchableOpacity 
        style={[
          { backgroundColor: pressed ? '#ff3126' : 'green' }, 
          styles.taskStatus
        ]} 
        onPress={onPressHandler}
      > 
        <Text style={styles.statusText}>{pressed ? 'Completed' : 'On Going'}</Text> 
      </TouchableOpacity> 
    </View> 
  ) 
}

// 补充样式示例（可根据你的需求调整）
const styles = StyleSheet.create({
  wrapper: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee'
  },
  taskList: {
    fontSize: 16
  },
  taskStatus: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 4
  },
  statusText: {
    color: '#fff',
    fontSize: 14
  }
});

export default Task;

小提示 #

如果不需要按钮文字跟随状态切换，把<Text>里的内容改回'On Going'就行啦～

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