React Native <>（空）组件到底是什么

Question

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

Answer 1

React v16.2 的一大亮点是 Fragments。 如果您正在使用 React 项目，您可能熟悉在您的 render() 中使用 <div> 或 <span> 包装您的子组件。

Fragment 是一流的组件，您可以使用它来包装您的子组件和元素，以代替 <div> 或 <span> 标记。像这样，

render(){
   return(
      <Fragment> 
        <h2>Heading</h2>
    <ChildA />
      </Fragment>
   );
}

或

render(){
   return(
      <React.Fragment> 
        <h2>Heading</h2>
    <ChildA />
      </React.Fragment>
   );
}

作为一种快捷方式，您还可以使用空标签<></> 来表示片段。像这样，

render(){
   return(
      <> 
        <h2>Heading</h2>
    <ChildA />
      </>
   );
}

Answer 2

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

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

与

相同

<>
// your code 
</>

希望对你有帮助

Answer 3

除了他所说的之外，它还用于嵌入许多 HTMLElements，例如你不需要将它们嵌套到 <div> 中。

例如，您可能有这样的用例

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

更多解释可以阅读React Official Documentation Fragment

Answer 4

这是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

希望对你有帮助！