能否在函数参数中对数据进行解构？附React组件示例

当然可以！你完全可以直接在函数参数中完成解构操作，这不仅能让代码更简洁，还能省去函数内部额外的解构步骤，让组件逻辑更直观。

你的原代码（函数内部解构） #

const AgendaItem = ({ item }) => { 
  const { venue, organiser, startTime, endTime, description } = item; 
  return ( 
    <View> 
      <Text>Location: {venue}</Text> 
      <Text>Consultant: {organiser}</Text> 
      <Text>Time: {`${startTime} - ${endTime}`}</Text> 
      <Text>Description: {description || "None"}</Text> 
    </View> 
  ); 
}; 
export default AgendaItem;

修改后的代码（参数中直接解构） #

你可以通过嵌套解构直接在参数里提取item对象的属性：

const AgendaItem = ({ item: { venue, organiser, startTime, endTime, description } }) => { 
  return ( 
    <View> 
      <Text>Location: {venue}</Text> 
      <Text>Consultant: {organiser}</Text> 
      <Text>Time: {`${startTime} - ${endTime}`}</Text> 
      <Text>Description: {description || "None"}</Text> 
    </View> 
  ); 
}; 
export default AgendaItem;

额外优化：处理item可能为undefined的情况 #

如果父组件可能不传item属性，为了避免解构undefined导致报错，你可以给item设置一个空对象作为默认值：

const AgendaItem = ({ item: { venue, organiser, startTime, endTime, description } = {} }) => { 
  return ( 
    <View> 
      <Text>Location: {venue || "Unknown"}</Text> 
      <Text>Consultant: {organiser || "Unknown"}</Text> 
      <Text>Time: {`${startTime || "TBA"} - ${endTime || "TBA"}`}</Text> 
      <Text>Description: {description || "None"}</Text> 
    </View> 
  ); 
}; 
export default AgendaItem;

这种参数解构的方式在React组件中非常常见，能有效简化代码结构，让组件的依赖属性一目了然。

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