javascript - 三元 onPress 按钮改变颜色 React Native
问题描述
当我按下它时,我正在使用三元条件来更改我的反应本机按钮颜色:
backgroundColor: { present? "pink": "blue" }
但是,当我这样做时,我收到以下错误:
SyntaxError: /home/chloe/Desktop/application/my-app/screens/Checkin/Items.js: Unexpected token, expected "," (88:156)
86 | <IconButton icon={user.favCheckinItems.includes(item._id) ? "star" : "star-outline"} color="rgb(194, 154, 39)" size={50} onPress={() => addToFavorites(item._id)} style={{ position: "absolute", marginLeft: Dimensions.get("window").width - 80 }} />
87 | <View style={{ flex: 1, flexDirection: "row", position: "absolute", bottom: 5 }}>
> 88 | <Button style={{ flex: 1, margin: 10, borderRadius: 10, borderColor: "black", borderWidth: 1, backgroundColor: { present? "pink": "blue" } }} onPress={() => update("present")}><Text style={{ color: "black" }}>Present</Text></Button>
| ^
89 | <Button style={{ flex: 1, backgroundColor: damanged, margin: 10, borderRadius: 10, borderColor: "black", borderWidth: 1 }} onPress={() => update("damaged")}><Text style={{ color: "black" }}>Damaged</Text></Button>
90 | <Button style={{ flex: 1, backgroundColor: missing, margin: 10, borderRadius: 10, borderColor: "black", borderWidth: 1 }} onPress={() => update("missing")}><Text style={{ color: "black" }}>Missing</Text></Button>
91 | </View>
TransformError SyntaxError: /home/chloe/Desktop/application/my-app/screens/Checkin/Items.js: Unexpected token, expected "," (88:156)
86 | <IconButton icon={user.favCheckinItems.includes(item._id) ? "star" : "star-outline"} color="rgb(194, 154, 39)" size={50} onPress={() => addToFavorites(item._id)} style={{ position: "absolute", marginLeft: Dimensions.get("window").width - 80 }} />
87 | <View style={{ flex: 1, flexDirection: "row", position: "absolute", bottom: 5 }}>
> 88 | <Button style={{ flex: 1, margin: 10, borderRadius: 10, borderColor: "black", borderWidth: 1, backgroundColor: { present? "pink": "blue" } }} onPress={() => update("present")}><Text style={{ color: "black" }}>Present</Text></Button>
| ^
89 | <Button style={{ flex: 1, backgroundColor: damanged, margin: 10, borderRadius: 10, borderColor: "black", borderWidth: 1 }} onPress={() => update("damaged")}><Text style={{ color: "black" }}>Damaged</Text></Button>
90 | <Button style={{ flex: 1, backgroundColor: missing, margin: 10, borderRadius: 10, borderColor: "black", borderWidth: 1 }} onPress={() => update("missing")}><Text style={{ color: "black" }}>Missing</Text></Button>
91 | </View>
- node_modules/react-native/Libraries/Utilities/HMRClient.js:326:31 in showCompileError
- node_modules/react-native/Libraries/Utilities/HMRClient.js:238:26 in client.on$argument_1
- node_modules/eventemitter3/index.js:181:21 in emit
- node_modules/metro/src/lib/bundle-modules/HMRClient.js:142:10 in _ws.onmessage
- node_modules/event-target-shim/dist/event-target-shim.js:818:20 in EventTarget.prototype.dispatchEvent
- node_modules/react-native/Libraries/WebSocket/WebSocket.js:232:8 in _eventEmitter.addListener$argument_1
- node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:189:10 in emit
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:425:19 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:112:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:373:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue
我不明白是什么问题。这是代码的完整部分:
<View>
<Image source={{ uri: item.image }} style={{ width: Dimensions.get("window").width, height: 200, marginBottom: 10 }} />
<Text style={{ position: "absolute", fontSize: 50, marginLeft: 20, color: 'white' }}>{item.name}</Text>
<IconButton icon={user.favCheckinItems.includes(item._id) ? "star" : "star-outline"} color="rgb(194, 154, 39)" size={50} onPress={() => addToFavorites(item._id)} style={{ position: "absolute", marginLeft: Dimensions.get("window").width - 80 }} />
<View style={{ flex: 1, flexDirection: "row", position: "absolute", bottom: 5 }}>
<Button style={{ flex: 1, margin: 10, borderRadius: 10, borderColor: "black", borderWidth: 1, backgroundColor: { present? "pink": "blue" } }} onPress={() => update("present")}><Text style={{ color: "black" }}>Present</Text></Button>
<Button style={{ flex: 1, backgroundColor: damanged, margin: 10, borderRadius: 10, borderColor: "black", borderWidth: 1 }} onPress={() => update("damaged")}><Text style={{ color: "black" }}>Damaged</Text></Button>
<Button style={{ flex: 1, backgroundColor: missing, margin: 10, borderRadius: 10, borderColor: "black", borderWidth: 1 }} onPress={() => update("missing")}><Text style={{ color: "black" }}>Missing</Text></Button>
</View>
</View>
这是更新功能:
const update = (state) => {
if (state == "present") {
setPresent(!present)
}
console.log(present)
}
这是初始化:
const [present, setPresent] = useState(false)
解决方案
您在这里不需要花括号:
// backgroundColor: { present? "pink": "blue" } <- Type Error
// Right syntax
backgroundColor: present? "pink": "blue"
推荐阅读
- java - 添加OncePerRequestFilter 是spring boot 应用程序后swagger 没有打开
- google-cloud-platform - 将元数据设置为 gsutil 中的特定扩展
- c# - 更新 Where Sql 表
- python - 无凭据错误:尝试将文件从 aws s3 存储桶加载到 jupyter 笔记本中
- python - ValueError:操作数无法与重新映射的形状一起广播 [original->remapped]: (2,2) 和请求的形状 (3,2)
- apache-spark - Delta Lake MERGE INTO 声明
- active-directory - OpenLDAP 为 LDAP 查询创建服务帐户
- reactjs - 带有持久化还原的 NEXT.JS 显示意外行为
- excel - 尝试在 5 次循环后保存工作簿
- python - Python:播放 MIDI 音符流式传输到端口