第 7 课：条件渲染提示

• 日期：2026-09-08
• 课程序号：第 7 课
• 知识点：条件表达式与组件渲染

用途

只在用户填写练习主题后显示确认提示。

核心概念

JSX 可以用 && 根据布尔条件决定是否创建一段界面；业务值仍保存在原有状态中。

最小代码或操作示例

const [topic, setTopic] = useState('');
return <View>
  <TextInput value={topic} onChangeText={setTopic} />
  {topic.length > 0 && <Text>准备学习：{topic}</Text>}
</View>;

3～5 分钟练习

输入为空时显示“请输入主题”，非空时显示课程名。

参考答案

使用 {topic.length === 0 ? <Text>请输入主题</Text> : <Text>{topic}</Text>}。

与上一课的联系

上一课建立了受控 TextInput；本课根据同一份输入状态决定是否显示提示。