不使用Redux的前提下如何在React组件之间传递props

不用Redux的前提下，通过状态提升即可完成需求：将两个子组件共享的状态放到共同父组件App中管理，父组件通过props向DataInput传递状态修改回调，向ContactList传递状态值即可。

修正后完整可运行代码 #

import { useState } from 'react';
import ReactDOM from 'react-dom/client';

// 输入组件：从props接收更新状态的回调
function DataInput(props){
  const [input, setInput] = useState({
    firstName:'',
    lastName:'',
    phone:''
  })

  function handleChange(e){
    setInput({
      ...input,
      [e.target.name]: e.target.value
    })
  }

  function handleSubmit(e){
    // 阻止表单默认提交刷新行为
    e.preventDefault();
    // 调用父组件传入的回调，把输入值传给父组件状态
    props.onAddContact(input);
    // 提交后清空输入框
    setInput({firstName:'', lastName:'', phone:''});
  }

  return(
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        name="firstName" 
        placeholder="First Name" 
        value={input.firstName} 
        onChange={handleChange}
      />
      <input 
        type="text" 
        name="lastName" 
        placeholder="Last Name" 
        value={input.lastName} 
        onChange={handleChange}
      />
      <input 
        type="text" 
        name="phone" 
        placeholder="Phone Number" 
        value={input.phone} 
        onChange={handleChange}
      />
      <button type="submit">Add User</button>
    </form>
  )
}

// 展示组件：从props接收要展示的联系人信息
function ContactList(props){
  return(
    <div>
      <label>{props.contact.firstName}</label>&nbsp;
      <label>{props.contact.lastName}</label>&nbsp;
      <label>{props.contact.phone}</label>
    </div>
  )
}

// 父组件：管理共享状态
function App(){
  // 存储联系人的共享状态，如果要存多个联系人可以改为数组类型
  const [contact, setContact] = useState({firstName:'', lastName:'', phone:''});

  // 传递给DataInput的回调，用于更新父组件的联系人状态
  const handleAddContact = (newContact) => {
    setContact(newContact);
    // 如果需要存储多个联系人，替换为下面的代码即可，ContactList同步修改为遍历数组渲染
    // setContact(prev => [...prev, newContact])
  }

  return (
    <div>
      <DataInput onAddContact={handleAddContact} />
      <ContactList contact={contact} />
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);

关键修改说明 #

• 公共状态提升到父组件App管理，避开子组件之间无法直接传值的限制
• 给DataInput传递onAddContact回调函数，输入提交后触发回调把值传回父组件更新共享状态
• 修复原有代码的语法错误：拼写错误e.targe.value、lasttName，标签未闭合、组件名引用错误等问题
• 表单提交增加阻止默认行为逻辑，避免页面刷新

内容的提问来源于stack exchange，提问作者Martin Gonzalez