如何在React父组件中获取导入子组件的useState状态值？

要在App组件中获取ToggleSwitch的isToggled状态，最标准的做法是状态提升——把状态从子组件移到父组件，子组件通过回调函数更新父组件的状态，这样父组件就能直接访问该状态值。

修改后的App.tsx #

import logo from "./logo.svg";
import "./App.css";
import React, { useState } from "react";
import ToggleSwitch from "./ToggleSwitch";

function App() {
  const [resp, setResp] = useState("");
  // 将isToggled状态提升到App组件
  const [isToggled, setIsToggled] = useState(false);

  async function callApi() {
    // 在这里使用isToggled状态，示例中作为URL参数传入API
    const url = `${process.env.REACT_APP_API_URL}/hello?isToggled=${isToggled}`;
    const helloStream = await fetch(url);
    const helloText = await helloStream.text();
    setResp(helloText as string);
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      {/* 向子组件传递状态和更新回调 */}
      <ToggleSwitch isToggled={isToggled} onToggle={() => setIsToggled(!isToggled)} />
      <br />
      <br />
      <div className="card">
        <button onClick={() => callApi()}>click this to call API</button>
        <p>{resp}</p>
      </div>
    </div>
  );
}

export default App;

修改后的ToggleSwitch.tsx #

import React from "react";
import "./ToggleSwitch.css";

// 定义组件接收的Props类型（TypeScript特性）
interface ToggleSwitchProps {
  isToggled: boolean;
  onToggle: () => void;
}

function ToggleSwitch({ isToggled, onToggle }: ToggleSwitchProps) {
  // 不再在子组件维护状态，直接使用父组件传入的状态和回调
  return (
    <label className="toggle-switch">
      <input type="checkbox" checked={isToggled} onChange={onToggle} />
      <span className="switch" />
    </label>
  );
}
export default ToggleSwitch;

关键变化说明 #

• 状态迁移：把isToggled状态的管理权从ToggleSwitch转移到App组件，App成为状态的唯一拥有者。
• Props通信：ToggleSwitch通过props接收状态值和更新函数，自身仅负责UI渲染和触发更新动作。
• API集成：在callApi函数中可直接使用isToggled状态，根据API要求将其作为URL参数、请求体参数或其他形式传入。

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