React Native中箭头函数两种写法的渲染差异原因解析

问题核心 #

你遇到的问题根源是箭头函数的隐式返回与显式返回语法差异，两种写法的本质区别在于是否主动返回JSX内容。

两种写法的差异说明 #

1. 正常渲染的隐式返回写法

const renderProduct = ({ item }) => <ProductCard product={item} />;

当箭头函数的函数体仅包含一行表达式时，可以省略大括号，此时箭头会自动返回该表达式的结果。这里的<ProductCard product={item} />是一个JSX表达式，会被直接返回给FlatList，作为每个列表项要渲染的组件。

2. 无法渲染的代码块写法

const renderProduct = ({ item }) => {
  <ProductCard product={item} />;
};

添加大括号后，箭头函数的函数体变成了代码块，此时JavaScript不会自动返回任何值——除非你显式使用return语句。当前代码仅在代码块内执行了JSX表达式，但没有返回它，所以renderItem拿到的是函数默认返回的undefined，FlatList自然无法渲染出ProductCard组件。

正确的带大括号写法 #

如果需要在函数体内添加额外逻辑（比如日志打印、条件判断），必须显式用return返回JSX：

const renderProduct = ({ item }) => {
  console.log("当前渲染的商品：", item);
  return <ProductCard product={item} />;
};

总结 #

箭头函数的两种写法规则：

• 省略大括号：自动返回唯一表达式的结果
• 带大括号：必须通过return明确指定返回值，否则函数默认返回undefined

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