React Native自定义组件是否支持内联定义的简写形式？

算力阿峰

2026-9-29

你示例中用尖括号包裹匿名函数的写法不符合JSX语法规范，无法正常运行。如果只是想简化单次使用的JSX片段书写，有以下两种可行的实现方式：

方式1：直接执行匿名函数返回JSX（无组件特性）

不需要使用组件调用的尖括号语法，直接用大括号包裹匿名函数并立即执行即可：

export default function App(){
 return(<View style={{flex:1}}>
  {(()=>{
     console.log('Created custom comp');
     return(<View></View>);
    })()}
 </View>)
}

注意：这种写法本质是普通JS表达式执行，不属于自定义组件，不会生成独立的组件实例，也不支持state、生命周期等组件特性，每次App组件重渲染时该函数都会完整执行一次，适合无状态的一次性JSX片段简化。

方式2：内联定义组件（保留组件特性）

如果需要用到组件的完整特性，也可以在App组件内部先定义再调用，比单独抽离到外层更紧凑：

export default function App(){
  const CustomComp = () => {
    console.log('Created custom comp');
    return(<View></View>);
  }
  return(<View style={{flex:1}}>
    <CustomComp />
  </View>)
}

这种写法的CustomComp是标准的函数组件，支持state、props、生命周期等所有组件特性，适合需要在当前App组件内复用、有状态的逻辑片段。