React Native究竟是什么<>（空）组件

Question

在React Native中，您可以将一组组件封装在一个<View>（或类似的）组件中。您还可以将一组组件封装为<>和</>。这些是什么？它们只是翻译成基本视图吗？这可能不是一个好习惯，但它不会发出警告，也不会崩溃。

Answer 1

这是Fragment组件的React快捷方式。

您可以这样写：

import React, { Component } from 'react'

class Component extends Component {
  render() {
    return <> <ComponentA/> <ComponentB/> </>
  }
}

或者没有快捷方式并导入Fragment组件

import React, { Component, Fragment } from 'react'

class Component extends Component {
  render() {
    return <Fragment> <ComponentA/> <ComponentB/> </Fragment>
  }
}

您必须知道，不能将任何键或道具与快捷方式语法一起使用。

这里是official documentation

希望对您有所帮助！

Answer 2

除了他所说的话，它还被用来嵌入了许多HTMLElements，例如，您并没有将它们嵌套到<div>中。

例如，您可能有此用例

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

有关更多说明，您可以阅读此React Official Documentation Fragment

Answer 3

在反应中<> and </>只是<React.Fragment>的语法糖。它的基本含义是所有组件都应包装在父元素中。因此，在不影响整个原理图设计的情况下，<>提供了一个包装器，用于将所有元素包装在其中。

 <React.Fragment>
     // your code
    </React.Fragment>

与]相同>

<>
// your code 
</>
希望有帮助