`Component A 
  import React, { useState } from 'react';
  export default function componentA(){
  const [componentA, setcomponentA] = useState("A Component")
   return(
         <>
          <div>
            <ComponentB Data = {componentA} />
          </div>
         </>
       )
  }
Component B 
import React, { useState } from 'react';
export default function componentB({Data}){
return(
      <>
        <div>
          <h1>{Data}</h1>
        </div>
     </>
   )
 }`

在React中，当表单提交时，有几个选项可以管理和收集嵌套组件的状态。以下是一些常见的方法

// Component A (parent)
function FormComponent() {
  const [formData, setFormData] = useState({/* initial form data */});
  
  const handleFormSubmit = () => {
    // Access formData and submit the form
  }
  return (
    <div>
      <ComponentB formData={formData} setFormData={setFormData} />
      {/* Other form fields */}
      <button onClick={handleFormSubmit}>Submit</button>
    </div>
  );
}
// Component B (child)
function ComponentB({ formData, setFormData }) {
  const handleFileChange = (event) => {
    // Update formData with the file data
    setFormData({ ...formData, file: event.target.files[0] });
  }
  return (
    <input type="file" onChange={handleFileChange} />
  );
}