reactjs - react-native - 或 <> 有什么不同？

Question

和<> 有区别吗？

使用时我必须导入'react-native'包

import { View } from 'react-native'

使用<>

时没有

<View>
 <FirstComponent/>
 <SeconComponent/>
</View>

<>
 <FirstComponent/>
 <SeconComponent/>
</>

它们相似吗？

Answer 1

他们不是。 View是一个可以算作元素的组件，而 <>也称为 Fragment , 就像一个包装器，但它不是一个元素。

<View style={{flexDirection: 'row', justifyContent: 'space-between' }}>
  <View>
    <FirstComponent />
    <SecondComponent />
  </View>
</View>

对于上面的代码，您将看到 SecondComponent就在FirstComponent旁边

<View style={{flexDirection: 'row', justifyContent: 'space-between' }}>
  <>
    <FirstComponent />
    <SecondComponent />
  </>
</View>

对于上面的例子，你会看到 FirstComponent 之间有很大的差距和 SecondComponent .

Fragment经常被使用是因为你想在逻辑上将元素组合在一起，但又不想因为下面的额外层而弄乱样式

// wish to return both `FirstComponent` & `SecondComponent`, but you can't without Fragment

const renderComponent = () => {
  //return <FirstComponent /><SecondComponent /> // <<== this is invalid
  return <><FirstComponent/><SecondComponent /></> // similar result as above 
}

<View style={{flexDirection: 'row', justifyContent: 'space-between' }}>
  {renderComponent()}
</View>