我在React中有一个搜索表单，它执行API调用，并使用useState（）React钩子在状态下保存名为nameservers的数据。

我正在尝试确定如何将此数据传递到另一个组件，以便数据可以用于在页面上的其他地方呈现。

目前，我只是在搜索表单下面的返回块中输出数据。

import React, { useState } from "react";
import { Spinner, Form, Button, Container, Col } from "react-bootstrap";
import { FaSearch } from 'react-icons/fa';

const SearchForm: React.FC = () => {
  const [domain, setDomain] = useState("");
  const [loading, setLoading] = useState(false);
  const [nameservers, setNameservers] = useState([]);
  const [submitted, setSubmitted] = useState(false);

  const formText = 'Search for a domains';

  const handleChange = (event: any) => {
    setDomain(event.target.value);
  };

  const handleSubmit = (event: any) => {
    event.preventDefault();
    setLoading(true);
    setSubmitted(true);
    console.log(domain);

    fetch(`https://dns.google.com/resolve?name=${domain}&type=NS`)
    .then(results => results.json())
    .then(data => { 
      setLoading(false);
      if (data && data.Answer) {
        data.Answer.sort((a: any, b: any) => a.data.localeCompare(b.data));
        setNameservers(data.Answer);
      } 
    });
  };

  return (
    <>
    <Form onSubmit={handleSubmit}>
      <Form.Row>
        <Col />
        <Col>
            <Form.Control type="text" placeholder={formText} value={domain}
          onChange={handleChange} autoFocus required />
        </Col>
        <Col>
        <Button variant="primary" type="submit">
            <FaSearch /> Search
          </Button>
        </Col>
      </Form.Row>
    </Form>
    <hr />
    {submitted && nameservers.map((server: any, index: number) => (
               <li key={index}>{server.data}</li>
            ))}

    {submitted && nameservers.length === 0 && (
               <small>Error</small>)}

   
      {loading && (
        <Container className="text-center">
           <Spinner animation="grow" size="sm"/>
           <Spinner animation="grow" size="sm"/>
           <Spinner animation="grow" size="sm"/>
        </Container>)}
        </>
  );
};

export default SearchForm;