在 React js 中传递多个 Props 的最佳方式

Question

如图中提到的传递 React Props，我想知道在 React 中传递多个 props 是否有更简洁的方法。

Answer 1

根据 React eslint 规则，出于可读性和维护原因，不建议使用 props spread，请在此处阅读有关该规则的更多信息

因此，您可以做的就是保持原样，或者将类似的道具分组到一个对象中并传递它，例如：

const entity = { getEntity, entityKeyAccess, setEntityKeyAccess };
const display = { display, setDisplay };
const child = { childKeyAccess, setChildKeyAccess };
// And so on you get the idea I guess.

<PanelEntity panelData={panelData} entity={entity} display={display} child={child} />;

这样，现在使用此组件的任何人都将能够轻松理解您的 props（当然不要忘记记录您的 props），并且您无需使用 props 传播即可整理该组件。

Answer 2

如果名称和键值相同，则可以使用 扩展语法

例子

<PanelEntity { ...{ panelData, setGetEntity, getEntity} } />

与这样做相同

<PanelEntity 
      panelData={panelData} 
      setGetEntity={setGetEntity} 
      getEntity={getEntity} />