如何将useState数据传递到其他.tsx文件？React Native开发问题

核心是通过父组件传递回调函数给子组件的方式，将子组件内部的toggled状态同步到父组件，属于React生态中状态提升的通用实现方式：

第一步：修改 ToggleSettings.tsx #

给组件新增回调参数，用于向父组件抛出状态变化：

import { useState } from 'react';

interface ToggleSettingProps {
  id: string
  // 新增回调props，接收子组件抛出的布尔值
  onToggleChange?: (toggledStatus: boolean) => void
}

const ToggleSettings = ({
  id,
  onToggleChange
}: ToggleSettingProps) => {
  const [toggled, setToggled] = useState(false);

  const handleToggle = (newValue: boolean) => {
    setToggled(newValue);
    // 状态变化时触发父组件传入的回调，把最新值传出去
    onToggleChange?.(newValue);
  }

  return (
   <Box>
     <Switch name={id} isChecked={toggled} onToggle={handleToggle} />
   </Box>
  );
};

export default ToggleSettings;

第二步：修改 NotificationsScreen.tsx #

在父组件中定义state存储开关状态，把更新状态的方法作为回调传给子组件即可，注：你原代码里类组件声明错误，应该用class关键字而非const，下面代码已经做了修正：

import React, { Component } from 'react';
import ToggleSettings from './ToggleSettings'; // 按你实际的文件路径调整

interface NotificationsScreenState {
  mainToggleStatus: boolean
}

class NotificationsScreen extends Component<{}, NotificationsScreenState> {
  // 父组件存储主开关状态
  state: NotificationsScreenState = {
    mainToggleStatus: false
  }

  render() {
    const { mainToggleStatus } = this.state;
    return (
     <Box>
       <ToggleSettings
        id={'notif_Main'}
        // 传入回调，接收子组件传过来的开关值更新父组件state
        onToggleChange={(toggled) => this.setState({ mainToggleStatus: toggled })}
      />
      <Divider marginY="3" />
      {mainToggleStatus && (
        <>
          <ToggleSettings
            id={'notif_DailyFollowUps'}
          />
       </>
      )}
     </Box>
    );
  }
};

export default NotificationsScreen;

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