非父子关系的工具函数如何获取并传递React组件Props？

代码场景 #

App.js #

import { getImageUrl } from './utils.js';

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

export default function Profile() {
  return (
    <div>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi', 
          imageId: 'YfeOqp2'
        }}
      />
    </div>
  );
}

utils.js #

export function getImageUrl(person, size = 's')   // --> 讨论这一行
{
  return (
    'https://i.imgur.com/' +
    person.imageId +
    size +
    '.jpg'
  );
}

问题解答 #

1. 该工具函数既非父组件也非子组件，能否获取组件的Props？ #

不能。这个工具函数是独立的纯函数，没有权限直接访问组件的Props。组件的Props是组件内部的局部变量，外部函数无法主动读取，只能通过显式传递参数的方式拿到对应的值。

2. 如何声明并传递这些参数？ #

• 声明参数：定义工具函数时，把需要用到的变量作为形参写在函数括号内，比如getImageUrl里的person和size，还可以给参数设置默认值（像例子里的size = 's'，调用时不传这个参数就会用默认值）。
• 传递参数：在组件内部调用工具函数时，把组件的Props作为实参传入即可。比如Avatar组件里的getImageUrl(person)，就是把组件接收的person Prop传给函数；如果要传递size，直接写成getImageUrl(person, size)就行。

3. 调用getImageUrl时未使用大括号传递参数的原因是什么？ #

JSX里的大括号{}是用来标记需要执行的JavaScript表达式的，而函数调用本身就是合法的JS表达式。

比如src={getImageUrl(person)}中，外层的{}是告诉React：这里面不是字符串，要执行JS代码；而getImageUrl(person)本身就是正常的函数调用，所以内部不需要再加大括号。如果错误地写成getImageUrl({person})，相当于把person包装成了一个对象传递，和函数定义的参数接收方式不匹配，会导致函数无法正确读取person.imageId。

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