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

In react, specifically referencing the hooks/functional paradigm, when do you need to use props.functionName? As far as I can tell, if the functions are named the same, you can omit props as follows:

Parent.js

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

Child.js

...
functionName();
...

However, if the name changes, props must be referenced as follows:

Parent.js

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

Child.js

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

Am I correct? If so, why use the second design pattern? (Perhaps just to call out that the function comes from a parent and isn't defined at the child level. Or maybe some other reason?)

CodePudding user response：

No. The name you use depends entirely on how the child component processes the props it is passed. How the parent component determines what value to pass is completely irrelevant.

If the props are placed in a variable named props then you need to access them through the object store in the variable.

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

If the first argument is destructured, then each property is stored in its own variable.

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

If the value is copied to another variable inside the component then you can also use the variable it was copied to.

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

CodePudding user response：

false ,it is Destructuring Props in React;

Destructuring is a convenient way of extracting multiple values from data stored in (possibly nested) objects and Arrays

props is an object so we can use the Destructuring

Destructuring gives access to the use of props in a more readable format and discards the need for props for every property.

` ;

      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

    };`

CodePudding user response：

When interfacing with a child component, the name that you use for something in your parent component may be different from the prop that the child component requires.

Just for example, say that your parent component has something to do with school, and you have:

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

But you also have a child component for students that expects an id prop. Then, to pass down the studentId to it, you'd do:

<Student id={studentId} />

And in that child component, you'd reference it by doing props.id.

You wouldn't want to do

const [id, setId] = useState();

in the parent component, and then

<Student id={id} />

when passing it down because then it wouldn't be clear in the parent component which ID that stateful value referred to - you'd probably have to add a comment.

If so, why use the second design pattern?

Sometimes, like in the situation I just described, the child component isn't designed with all identifiers used in the parent component in mind - which is perfectly reasonable, that's what allows for so many things in programming to be modular (and adaptable and useful). As a result, sometimes you need a prop or variable to have one name in the parent component, and another in the child component, which requires the

<Child otherName={functionName}/>

approach.