为什么 props.functionName 中的 props 只是偶尔需要调用？

Question

在react中，具体参考了hooks/functional范式，什么时候需要用到props.functionName？据我所知，如果功能名称相同，则可以省略道具，如下所示：

Parent.js

...
<Child functionName={functionName}/>
...

Child.js

...
functionName();
...

但是，如果名称发生变化，道具必须参考如下：

Parent.js

...
<Child otherName={functionName}/>
...

Child.js

...
props.otherName();
...

我说的对吗？如果是这样，为什么要使用第二种设计模式？（也许只是为了指出该函数来自父级而不是在子级定义。或者可能是其他原因？）

Answer 1

没有。您使用的名称完全取决于子组件如何处理传递给它的道具。父组件如何确定传递什么值完全无关。

如果道具被放置在名为props的变量中，那么您需要通过存储在变量中的对象来访问它们。

const Child = (props) => {
    props.functionName();
    ...
}

如果第一个参数是 destructured，那么每个属性都存储在自己的变量中。

const Child = ({functionName}) => {
    functionName();
    ...
}

如果值被复制到组件内的另一个变量，那么您也可以使用它被复制到的变量。

const Child = (props) => {
    const functionName = props.functionName();
    functionName();
    ...
}

Answer 2

与子组件交互时，您在父组件中使用的名称可能与子组件所需的 prop 不同。

举个例子，你的父组件和学校有关，你有：

const [studentId, setStudentId] = useState();
const [parentId, setParentId] = useState();

但是您还有一个针对学生的子组件，它需要一个 id 道具。然后，要将 studentId 传递给它，您需要：

<Student id={studentId} />

在该子组件中，您可以通过 props.id.

来引用它

你不会想做的

const [id, setId] = useState();

在父组件中，然后

<Student id={id} />

向下传递时，因为在父组件中不清楚该有状态值引用的 ID - 您可能需要添加注释。

If so, why use the second design pattern?

有时，就像我刚才描述的情况一样，子组件在设计时并没有考虑到父组件中使用的所有标识符 - 这是完全合理的，这就是允许编程中的许多东西模块化的原因（并且适应性强且有用）。因此，有时你需要一个 prop 或变量在父组件中有一个名称，在子组件中有另一个名称，这需要

<Child otherName={functionName}/>

方法。

Answer 3

错，是 React 中的 Destructuring Props；

解构是一种从存储在（可能嵌套的）对象和数组中的数据中提取多个值的便捷方法

props 是一个对象所以我们可以使用 Destructuring

解构允许以更易读的格式访问 props 并放弃每个属性.

对 props 的需要

<Child functionName={functionName}  name={name}/>;
const child = (props)=>{
    // you need to write props.functionName
    props.functionName();
    const thisName = props.name
};

const child =({functionName,name})=>{
    // you dont need to write *props.*
    functionName();
    const thisName = name 
};

为什么 props.functionName 中的 props 只是偶尔需要调用？

Why does props in props.functionName only need to be called sometimes?

javascript

reactjs

react-props