React函数组件间如何用Props传递数据？跨组件传值失败求助

要在Contact.js和Profile.js之间共享用户输入的name数据，你需要将状态提升到它们的共同父组件——因为React的Props只能从父组件向下传递给子组件，无法直接在同级组件间传递。以下是具体修改步骤：

1. 创建/修改父组件（示例：App.js） #

父组件将负责管理name状态，并将状态值和更新方法分别传递给Profile和Contact组件：

import React, { useState } from "react";
import Contact from "./Contact";
import Profile from "./Profile";

function App() {
  // 在父组件中定义共享状态
  const [name, setName] = useState('');

  return (
    <div className="App">
      {/* 将setName传递给Contact，用于更新状态 */}
      <Contact name={name} setName={setName} />
      {/* 将name传递给Profile，用于显示 */}
      <Profile name={name} />
    </div>
  );
}

export default App;

2. 修改Contact.js #

移除组件内部的name状态，改为接收父组件传递的name和setName props：

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

// 接收父组件传递的props
const Contact = ({ name, setName }) => {

    const HandleName = (e) => {
        // 使用父组件的setName更新共享状态
        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>
            {/* 使用父组件传递的name作为输入框的值 */}
            <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='someone@someone.com'></FormControl>
            </FormGroup>
        </Form>
        </Accordion.Body>
        </Accordion.Item>
        </Accordion>
        </>
    )
}

export default Contact;

3. 修改Profile.js #

接收父组件传递的name props并在页面中显示：

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

// 接收父组件传递的name prop
function Profile({ name }) {
  return (
    <>
    <Card className="text-center">
        <Card.Header>
           
        </Card.Header>
      <Card.Body>
        {/* 显示从Contact传递过来的name值 */}
        <Card.Title>{name || 'Special title treatment'}</Card.Title>
        <Card.Text>
          {name ? `Hello, ${name}!` : '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;

核心逻辑说明 #

• 状态提升：将原本在Contact组件内的name状态移到父组件，确保两个子组件共享同一数据源。
• Props传递：父组件把setName方法传给Contact用于更新状态，把name值传给Profile用于显示最新输入内容。
• 当用户在Contact的输入框中输入名字时，父组件的状态会实时更新，Profile组件会自动接收到最新的name值并重新渲染。

内容的提问来源于stack exchange，提问作者Onur Alemdaroglu