如何在React主应用App.js中使用其他组件中的formIsValid变量？

嗨，作为React初学者，这种组件间状态共享的问题确实挺常见的～我给你两种实用方案，先从最基础的状态提升开始（不需要额外库），再到Context的实现，一步步帮你解决问题：

方案一：状态提升（React基础方案，优先推荐） #

如果只是父子组件之间共享状态，状态提升是React官方推荐的最简单方案——把formIsValid的状态放到父组件App.js里，通过props把状态更新方法传递给子组件，子组件验证通过后调用这个方法更新父组件状态。

1. 修改App.js代码 #

import { useState } from 'react';
import DeliveryNote from './DeliveryNote'; // 你的子组件
import LoadProducts from './LoadProducts';

function App() {
  // 把formIsValid状态放在父组件
  const [formIsValid, setFormIsValid] = useState(false);

  // 定义回调函数，让子组件可以更新父组件状态
  const handleFormValidation = (isValid) => {
    setFormIsValid(isValid);
  };

  return (
    <div className="App">
      {/* 根据formIsValid的值切换显示组件 */}
      {!formIsValid ? (
        <DeliveryNote onFormValidated={handleFormValidation} />
      ) : (
        <LoadProducts />
      )}
    </div>
  );
}

export default App;

2. 修改子组件代码 #

接收父组件传递的onFormValidated回调，在验证通过时调用它更新状态：

import { useRef } from 'react';
import Card from './Card'; // 假设你有这个组件

const DeliveryNote = ({ onFormValidated }) => {
  const deliveryNoteInputRef = useRef();

  const formSubmissionHandler = (event) => {
    event.preventDefault();
    const enteredDeliveryNote = deliveryNoteInputRef.current.value;
    const enteredDeliveryNoteIsValid = enteredDeliveryNote.trim() === "1234";
    
    if (enteredDeliveryNoteIsValid) {
      // 调用父组件的回调，更新formIsValid为true
      onFormValidated(true);
      console.log(enteredDeliveryNote);
    } else {
      // 验证不通过时也可以通知父组件（可选）
      onFormValidated(false);
      console.log("Invalid Load ID");
    }
  };

  return (
    <Card className="login">
      <form onSubmit={formSubmissionHandler}>
        <div className="control">
          <label htmlFor="delivery_note">Load ID</label>
          <input type="text" id="delivery_note" ref={deliveryNoteInputRef} />
        </div>
        <div className="actions">
          <button className="button">Potvrdit</button>
        </div>
      </form>
    </Card>
  );
};

export default DeliveryNote;

方案二：Context API（适合复杂组件树场景） #

如果你的组件层级很深，或者多个不相关的组件需要共享这个状态，用Context API会比层层传递props更方便。

1. 创建Context文件（比如FormValidationContext.js） #

import { createContext, useState, useContext } from 'react';

// 创建Context
const FormValidationContext = createContext();

// 创建Provider组件，包裹需要共享状态的组件
export function FormValidationProvider({ children }) {
  const [formIsValid, setFormIsValid] = useState(false);

  const updateFormValidity = (isValid) => {
    setFormIsValid(isValid);
  };

  // 传递状态和更新函数给子组件
  const contextValue = {
    formIsValid,
    updateFormValidity
  };

  return (
    <FormValidationContext.Provider value={contextValue}>
      {children}
    </FormValidationContext.Provider>
  );
}

// 自定义Hook，简化组件对Context的调用
export function useFormValidation() {
  const context = useContext(FormValidationContext);
  if (!context) {
    throw new Error('useFormValidation must be used within a FormValidationProvider');
  }
  return context;
}

2. 修改App.js用Provider包裹 #

import { FormValidationProvider, useFormValidation } from './FormValidationContext';
import DeliveryNote from './DeliveryNote';
import LoadProducts from './LoadProducts';

function App() {
  // 使用自定义Hook获取状态
  const { formIsValid } = useFormValidation();

  return (
    <FormValidationProvider>
      <div className="App">
        {!formIsValid ? (
          <DeliveryNote />
        ) : (
          <LoadProducts />
        )}
      </div>
    </FormValidationProvider>
  );
}

export default App;

3. 修改子组件使用Context #

import { useRef } from 'react';
import Card from './Card';
import { useFormValidation } from './FormValidationContext';

const DeliveryNote = () => {
  const deliveryNoteInputRef = useRef();
  // 从Context中获取更新函数
  const { updateFormValidity } = useFormValidation();

  const formSubmissionHandler = (event) => {
    event.preventDefault();
    const enteredDeliveryNote = deliveryNoteInputRef.current.value;
    const enteredDeliveryNoteIsValid = enteredDeliveryNote.trim() === "1234";
    
    if (enteredDeliveryNoteIsValid) {
      updateFormValidity(true);
      console.log(enteredDeliveryNote);
    } else {
      updateFormValidity(false);
      console.log("Invalid Load ID");
    }
  };

  return (
    <Card className="login">
      <form onSubmit={formSubmissionHandler}>
        <div className="control">
          <label htmlFor="delivery_note">Load ID</label>
          <input type="text" id="delivery_note" ref={deliveryNoteInputRef} />
        </div>
        <div className="actions">
          <button className="button">Potvrdit</button>
        </div>
      </form>
    </Card>
  );
};

export default DeliveryNote;

总结 #

• 如果你只是简单的父子组件共享状态，优先用状态提升，简单直接不需要额外依赖；
• 如果组件树复杂、多组件需要共享状态，再考虑Context API；
• Redux是基于Context的状态管理库，适合大型应用的复杂状态管理，你现在的场景用Context完全足够。

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