根据最小特权原则 https://en.wikipedia.org/wiki/Principle_of_least_privilege,这是正确的方法:
<InnerComponent name={object.name} image={object.image} />
这限制了InnerComponent
避免意外修改原始对象或访问不适合该对象的属性。
或者,可以从原始对象中选取属性并作为 props 传递:
<InnerComponent {...pick(object, 'name', 'image')} />
如果有许多属性需要列出,那么可能有一个 prop 接受一个对象:
<InnerComponent object={pick(object, 'name', 'image')} />
P.S.
import { pick } from "loadash";
or
const pick = (o, ...keys) => Object.fromEntries(Object.entries(o).filter(([k]) => keys.includes(k)))