React中如何从主组件调用已加载子组件的函数？

你现在的核心问题是开关状态定义在父组件，子组件无法直接访问，通过React最基础的props传值就能实现，顺便修正你现有代码里两个会导致报错/逻辑异常的问题：hooks写在了组件外部、状态初始值用了字符串而非布尔值。

1. 调整父组件Landing.js代码 #

把状态定义移到组件函数内部，修正初始值类型，渲染子组件时把开关状态作为prop下发：

import React, { useState } from "react";
// 按你的实际路径引入子组件
import LandingSub1 from "./LandingSub1";

export default function Landing() {
  // 注意：useState必须写在组件函数顶层，初始值用布尔值false，不要加引号
  const [isActive, setActive] = useState(false);
  const handleToggle = () => {
    setActive(!isActive);
  };

  return (
    <div className="landing-wrap">
      {/* 原有切换按钮 */}
      <button onClick={handleToggle}>
        {isActive ? "Get Code" : "Hide Code"}
      </button>

      {/* 给子组件传入isActive状态 */}
      <LandingSub1 isActive={isActive} />
    </div>
  );
}

2. 调整子组件LandingSub1.js代码 #

子组件通过入参接收父组件传入的状态，直接用在显隐类名的判断逻辑里即可：

// 接收父组件传的isActive属性
export default function LandingSub1({ isActive }) {
  return (
    <div className={`codeview my-4 ${isActive ? "hide" : "show"}`}>
      <pre>Code</pre>
    </div>
  );
}

注意事项 #

• 所有React Hooks（比如useState、useEffect）必须写在函数组件/自定义Hook的顶层作用域，不能放在组件外部、条件判断、循环嵌套里，否则会直接抛出规则错误
• 布尔类型的状态初始值不要加引号，你原来写的useState("false")传入的是非空字符串，JS中非空字符串隐式转换为布尔值是true，会导致初始开关逻辑完全错乱
• 父子组件通信优先用props：父组件维护的状态、修改状态的方法都可以通过props传给子组件，状态变更后React会自动同步给所有引用该状态的子组件，触发重渲染更新视图，不需要额外引入复杂的状态管理库。

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