如何在另一个组件中使用一个组件中的变量

Question

我有3个组件，分别存储在不同的文件中。 1.GetUser（），2.App（），3.Form（）。我想使用来自GetUser组件的两个变量，它们存储在data.user.map(({ name, email })中。在这里，我对name和email说得很对。我想在if(myValue === "name"&&myValue2 ==="email"){的Form组件中使用这些变量，而不是“ name”字符串和“ email”字符串。如何在组件之外使用这些变量？

function GetUser () {
    const { loading, error, data } = useQuery(GET_USER);

    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error :(</p>;
    const test = { myVal:"demo"};
    return data.user.map(({ name, email }) => (
      <div >
        <p>
          {console.log(name)}
        </p>
      </div>
    ));
  }
  export default GetUser;
  
  
  function App() {
  return (
        <div className="App">
          <header className="App-header">
            <p>Form Validation</p>
            <Home text = {'danger'}/> 
            <Home text = {'no-dangerr'}/> 
            <Form />
            {/* <GetUser /> */}
          </header>
        </div>
     
  );
}

export default App;

const Form:FunctionComponent<myForm> = ({title, valueInput}) =>{

    

    function submitForm(e:any){
       
        if(myValue === "name"&&myValue2 ==="email"){
             setLabel("Valid")         
        }else{
            setLabel("Not Valid")         
        }
    }

    return(
        
        <div>
            <form className>
                <label>{labelVal}
                <input onChange = {event =>setTitle(event.target.value)} type = 'text' placeholder = 'type name'/>
                <input onChange = {event =>setTitle2(event.target.value)} type = 'email' placeholder = 'type email'/>
                </label>
                <button onClick = {submitForm}>SUBMIT</button>
            </form>
        </div>

    )
}
export default Form;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>