React Props使用问题：组件传值、父子组件识别及双向传参疑问

代码错误点及修复 #

你当前代码存在4个语法错误导致传值不生效：

• 第二个组件未引入第一个组件就直接调用
• 第一个组件的调用格式错误，没有用React组件的尖括号语法包裹
• 第二个组件导出时名称多了空格
• 第一个组件名拼写错误（FirtComponent缺少字母s，属于可选修正项，避免后续调用时拼写匹配失败）

修正后第一个组件代码 #

// 修正组件名拼写
export const FirstComponent = ({play}) => {
    return (
        <>
        <h2>i'm First Component</h2>
        <button onClick={play}>Send</button>
        </>
    )
}

修正后第二个组件代码 #

// 第一步：引入第一个组件，文件路径按你的实际项目结构调整
import { FirstComponent } from './first-component';

const SecondComponent = () => {
    const play = () =>{
        console.log("Hey!");
    }
    return (
        <>
        <h2>i'm second Component</h2>
        {/* 第二步：用合法的组件标签语法传props */}
        <FirstComponent play={play} />
        </>
    )
}

// 第三步：修正导出的名称空格问题
export default SecondComponent

疑问解答 #

1. 父子组件的判断规则 #

完全由组件调用关系决定：在自身的返回模板里渲染了另一个组件的就是父组件，被渲染的就是子组件，和组件的定义顺序、文件名、命名规则都没有关系。以上面的代码为例，SecondComponent里渲染了FirstComponent，所以SecondComponent是父组件，FirstComponent是子组件。

2. 组件双向传参的实现逻辑 #

React默认遵循单向数据流规则：只能父组件通过props向子组件传递参数或者函数，子组件不能直接修改父组件传入的props，也不能直接主动向父组件传值。
如果需要实现双向通信的效果，按组件关系分两种实现方式：

• 父子组件：父组件把修改自身状态的函数通过props传给子组件，子组件调用该函数时把要传递的内容作为参数传入，间接实现子向父传值，模拟双向通信效果
• 平级组件：把两个组件需要共享的状态提升到它们共同的父组件中管理，再通过props把状态和修改状态的函数分别下发给两个子组件，实现互相传值的需求

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