React Native点击Icon触发父组件状态变更后渲染新组件异常问题

问题原因 #

• 渲染条件取值错误：render方法内判断Casie组件渲染逻辑时，直接通过this.calendarState取值，而calendarState存储在组件实例的state属性下，this.calendarState为undefined，判断条件永远为假，组件不会渲染。
• 组件导入缺失：父组件未引入Casie子组件，直接调用

  return (<Casie/>)
  

  会导致组件无法识别。
• 泛型参数错误：React类组件泛型第一个参数为props类型，第二个为state类型，原代码仅传入HomeSceneState作为第一个参数，state类型未正确声明。
• 文本组件不符合规范：React Native不允许纯文本直接放在View组件下，必须用Text组件包裹，否则会触发渲染异常。
• 自定义Icon事件未透传：如果点击Icon后控制台未打印open calendar，说明自定义Icon组件未将传入的onPress属性绑定到内部可点击容器（如TouchableOpacity）上，点击事件无法触发。

修复方案 #

父组件修改后代码 #

import React, {Component} from 'react';
import {View} from 'react-native';
import {Icon} from '../ui/Icon';
// 替换为你实际Casie组件的文件路径
import Casie from './Casie';

type HomeSceneState = {
  calendarState: boolean
}

// 修正泛型参数，第一个为props类型（无自定义props则传空对象），第二个为state类型
class HomeScene extends Component<{}, HomeSceneState> {
  state = {
    calendarState: false
  }

  openCalendar = () => {
    console.log("open calendar")
    this.setState({
      calendarState: true
    })
  }

  render() {
    return (
      <View style={{
        marginBottom: spacing.double,
        backgroundColor: "black",
        flexDirection: "row"
      }}>
        <View>
          {/* 可简化写法，无需额外包裹匿名函数 */}
          <Icon onPress={this.openCalendar} />
          {/* 修正取值路径，从state中获取状态 */}
          {this.state.calendarState ? <Casie/> : null}
        </View>
      </View>
    );
  }
}

export default HomeScene;

Icon组件适配（如点击无日志输出时修改） #

自定义Icon组件需要透传onPress到可点击容器，示例如下：

import {TouchableOpacity, Image} from 'react-native';

export const Icon = ({onPress, iconSource}) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <Image source={iconSource} />
    </TouchableOpacity>
  )
}

子组件修改后代码 #

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

// 无自定义props可省略泛型参数，有需要可补充CalendarProps类型定义
class Casie extends Component {
  render() {
    return (
      <View>
        {/* 文本必须用Text组件包裹，符合React Native渲染规范 */}
        <Text style={{color: 'white'}}>I am a new Component</Text>
      </View>
    );
  }
}

export default Casie;

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