如何使用 props 在功能组件之间传递数据？

Question

我想将数据 {name} 从 Contact.js 传递到 Profile.js。我尝试使用 props 来传递 {name} 数据，但我不能。我做错了什么，但我无法弄清楚。 ..当用户在同一（Contact.js）页面上输入时，我可以写名称，但不能在Profile.js中写

联系.js

import React, { useState } from "react";
import Form from 'react-bootstrap/Form';
import Accordion from 'react-bootstrap/Accordion';
import { FormControl, FormGroup, FormLabel } from 'react-bootstrap';

const Contact = () => {

    const [name, setName] = useState('');
    //const [lastName, setLastName] = useState('');
    //const [email, setEmail] = useState();


    const HandleName = (e) => {
        setName(e.target.value);
    }


    return (
        <>
        {name}
        {/*Contact Information*/}
        <Accordion>
        <Accordion.Item eventKey="0">
        <Accordion.Header>Contact Information</Accordion.Header>
        <Accordion.Body>
        <Form>
            <FormGroup className='mb-3' controlId='name'>
            <FormLabel>Name</FormLabel>
            <FormControl type='text' value={name} onChange={HandleName} placeholder='Your Name'></FormControl>
            </FormGroup>
        </Form>
        <Form>
            <FormGroup className='mb-3' controlId='lastname'>
            <FormLabel>Last Name</FormLabel>
            <FormControl type='text' placeholder='Your Last Name'></FormControl>
            </FormGroup>
        </Form>
        <Form>
            <FormGroup className='mb-3' controlId='email'>
            <FormLabel>Email Address</FormLabel>
            <FormControl type='email' placeholder='[email protected]'></FormControl>
            </FormGroup>
        </Form>
        </Accordion.Body>
        </Accordion.Item>
        </Accordion>
        </>
    )
}


export default Contact;

Profile.js

import React from 'react';
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';

function Profile() {
    

  return (
    <>
    <Card className="text-center">
        <Card.Header>
           
        </Card.Header>
      <Card.Body>
        <Card.Title>Special title treatment</Card.Title>
        <Card.Text>
          With supporting text below as a natural lead-in to additional content.
        </Card.Text>
        <Button variant="primary">Go somewhere</Button>
      </Card.Body>
      <Card.Footer className="text-muted">2 days ago</Card.Footer>
    </Card>
    </>
  );
}

export default Profile;

我还尝试将 {props} 传递给 Contact 函数，并考虑在 Contact.js 中使用 {props.name} 但没有成功。我知道我错过了一些东西，但已经两天了，无法解决......

Answer 1

如果你想在 2 个页面之间切换，你需要像这样导入链接

import { Link } from "react-router-dom";

是一个允许用户通过单击或点击导航到另一个页面的元素 然后使用 Link 组件

但是如果您需要在两个不同的页面中使用相同的信息，您可以使用 （前端：localStorage 或 sessionStorage）或与后端一起使用，因此您需要创建一个 API 来获取数据。 上下文 API 或全局状态管理、服务器端处理 (API)。