blocks|key|11738|text|这是Fragment组件的反应快捷方式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|11739|你可以这样写：|11740|import+React,+{+Component+}+from+'react'

class+Component+extends+Component+{
++render()+{
++++return+<>+<ComponentA/>+<ComponentB/>+</>
++}
}|code-block|syntax|javascript|11741|或者没有快捷方式和导入Fragment组件|11742|import+React,+{+Component,+Fragment+}+from+'react'

class+Component+extends+Component+{
++render()+{
++++return+<Fragment>+<ComponentA/>+<ComponentB/>+</Fragment>
++}
}|11743|您必须知道，您不能使用任何键或支柱与快捷语法。|11744|这是正式文件|11745|希望能帮上忙！|11746|entityMap|0|LINK|mutability|MUTABLE|url|https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html^0|2|8|0|0|0|B|8|0|0|0|2|4|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1D|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1E|8|@]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|U|3|V|5|6|7|1I|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]]]

It's the React shortcut for <code>Fragment</code> component.

You can write like this : 

<pre><code>import React, { Component } from 'react'

class Component extends Component {
 render() {
 return &lt;&gt; &lt;ComponentA/&gt; &lt;ComponentB/&gt; &lt;/&gt;
 }
}
</code></pre>

Or without the shortcut and import <code>Fragment</code> component

<pre><code>import React, { Component, Fragment } from 'react'

class Component extends Component {
 render() {
 return &lt;Fragment&gt; &lt;ComponentA/&gt; &lt;ComponentB/&gt; &lt;/Fragment&gt;
 }
}

</code></pre>

You have to know, you can't use any key or prop with the shortcut syntax.

Here's the <a href="https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html" rel="noreferrer">official documentation</a>

I hope it helps !

blocks|key|1879331|text|除了他所说的，它还习惯于嵌入许多HTMLElements，例如，您不需要将它们嵌套到<div>中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|1879332|例如，您可能有以下用例：|1879333|render()+{
++return+(
++++<React.Fragment>
++++++<ChildA+/>
++++++<ChildB+/>
++++++<ChildC+/>
++++</React.Fragment>
++);
}|code-block|syntax|javascript|1879334|有关更多解释，请阅读此反应官方文件片段|1879335|entityMap|0|LINK|mutability|MUTABLE|url|https://reactjs.org/docs/fragments.html^0|C|G|16|5|0|0|0|B|8|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|12|8|@]|E|@]|F|$]]|$1|I|3|J|5|K|7|13|8|@]|E|@]|F|$L|M]]|$1|N|3|O|5|6|7|14|8|@]|E|@$9|15|A|16|1|17]]|F|$]]|$1|P|3|-4|5|6|7|18|8|@]|E|@]|F|$]]]|Q|$R|$5|S|T|U|F|$V|W]]]]

In addition to what He has said, it is used to embed many HTMLElements that you don't what them to be nested into a <code>&lt;div&gt;</code> for example.

For example, you may have this use cases

<pre><code>render() {
 return (
 &lt;React.Fragment&gt;
 &lt;ChildA /&gt;
 &lt;ChildB /&gt;
 &lt;ChildC /&gt;
 &lt;/React.Fragment&gt;
 );
}

</code></pre>

For more explanation you can read this <a href="https://reactjs.org/docs/fragments.html" rel="noreferrer">React Official Documentation Fragment</a>

blocks|key|1879366|text|在react中，<>+and+</>只是<React.Fragment>的一种语法糖。它的基本意思是，所有组件都应该包装在父元素中。因此，在不影响整个设计原理图的情况下，<>提供了一个包装器，可以将所有的项目包在里面。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1879367|<React.Fragment>
//+your+code
</React.Fragment>|code-block|syntax|javascript|1879368|是一样的|1879369|<>
//+your+code+
</>|1879370|希望它能帮上忙|1879371|entityMap^0|8|A|K|G|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|10|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

In react <code>&lt;&gt; and &lt;/&gt;</code> is just a syntactic sugar for <code>&lt;React.Fragment&gt;</code> . What it basically means is all components should be wrapped in a parent element. So without disturbing the whole schematic design &lt;&gt; provides a wrapper to wrap all your elemnts inside it .
<pre><code>&lt;React.Fragment&gt;
// your code
&lt;/React.Fragment&gt;
</code></pre>
is same as
<pre><code>&lt;&gt;
// your code 
&lt;/&gt;
</code></pre>
hope it helps

blocks|key|1879433|text|第16.2版反应的重点之一是片段。如果您正在使用React项目，您可能熟悉在render()中使用<div>或包装您的子组件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1879434|片段是一个一流的组件，您可以使用它来包装您的子组件和元素，而不是<div>或标记。就像这样，|1879435|render(){
+++return(
++++++<Fragment>+
++++++++<h2>Heading</h2>
++++<ChildA+/>
++++++</Fragment>
+++);
}|code-block|syntax|javascript|1879436|或|1879437|render(){
+++return(
++++++<React.Fragment>+
++++++++<h2>Heading</h2>
++++<ChildA+/>
++++++</React.Fragment>
+++);
}|1879438|作为快捷方式，还可以使用空标记<></>来指示片段。就像这样，|1879439|render(){
+++return(
++++++<>+
++++++++<h2>Heading</h2>
++++<ChildA+/>
++++++</>
+++);
}|1879440|entityMap^0|1D|5|1J|6|0|W|5|12|6|0|0|0|0|F|5|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|S|3|T|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|U|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|V|$]]

One of the highlights of React v16.2 is Fragments.
If you're working with React projects, you may be familiar with wrapping your child components with <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code> in your render().
Fragment is a first-class component that you can use to wrap your child components and elements in place of <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code> tags. Like so,
<pre><code>render(){
 return(
 &lt;Fragment&gt; 
 &lt;h2&gt;Heading&lt;/h2&gt;
 &lt;ChildA /&gt;
 &lt;/Fragment&gt;
 );
}
</code></pre>
or
<pre><code>render(){
 return(
 &lt;React.Fragment&gt; 
 &lt;h2&gt;Heading&lt;/h2&gt;
 &lt;ChildA /&gt;
 &lt;/React.Fragment&gt;
 );
}
</code></pre>
As a shortcut, you can also use empty tags <code>&lt;&gt;&lt;/&gt;</code> to indicate a fragment. Like so,
<pre><code>render(){
 return(
 &lt;&gt; 
 &lt;h2&gt;Heading&lt;/h2&gt;
 &lt;ChildA /&gt;
 &lt;/&gt;
 );
}
</code></pre>

blocks|key|1879494|text|如果你不想添加额外的divs+&+spans，|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1879495|<>对你来说是个不错的选择|1879496|是否替换了React.Fragment组件？|1879497|<>+==+|1879498|entityMap^0|A|C|0|0|5|E|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|U|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|M|$]]

If you dont want to put extra <code>divs &amp; spans</code>,
&lt;&gt;&lt;/&gt; will be nice pick for you
React does the replacement of <code>React.Fragment</code> component there
&lt;&gt;&lt;/&gt; == &lt;React.Fragment&gt;&lt;/React.Fragment&gt;

In React Native you can encapsulate a set of components in one single <code>&lt;View&gt;</code> (or similar) component. You can also encapsulate a set of components as <code>&lt;&gt;</code> and <code>&lt;/&gt;</code>. What are these? Do they just translate to an base View? It's probably not a good practice but it doesn't give a warning and it doesn't crash.

React Native what exactly is the <> (empty) component

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

问<> (空)组件究竟是什么？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问<> (空)组件究竟是什么？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问<> (空)组件究竟是什么？
EN