noUselessFragments
诊断类别：lint/complexity/noUselessFragments
¥Diagnostic Category: lint/complexity/noUselessFragments
自从：v1.0.0
¥Since: v1.0.0
来源：
¥Sources:
-
与以下相同：
react/jsx-no-useless-fragment¥Same as:
react/jsx-no-useless-fragment
禁止不必要的片段
¥Disallow unnecessary fragments
¥Examples
¥Invalid
<>foo</>code-block.jsx:1:1 lint/complexity/noUselessFragments FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Avoid using unnecessary Fragment.
> 1 │ <>
│ ^^
> 2 │ foo
> 3 │ </>
│ ^^^
4 │
ℹ A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
ℹ Unsafe fix: Remove the Fragment
1 │ - <>
2 │ - foo
3 │ - </>
1 │ + “foo”
4 2 │
<React.Fragment>foo</React.Fragment>code-block.jsx:1:1 lint/complexity/noUselessFragments FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Avoid using unnecessary Fragment.
> 1 │ <React.Fragment>
│ ^^^^^^^^^^^^^^^^
> 2 │ foo
> 3 │ </React.Fragment>
│ ^^^^^^^^^^^^^^^^^
4 │
ℹ A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
ℹ Unsafe fix: Remove the Fragment
1 │ - <React.Fragment>
2 │ - foo
3 │ - </React.Fragment>
1 │ + “foo”
4 2 │
<> <>foo</> <SomeComponent /></>code-block.jsx:2:5 lint/complexity/noUselessFragments FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Avoid using unnecessary Fragment.
1 │ <>
> 2 │ <>foo</>
│ ^^^^^^^^
3 │ <SomeComponent />
4 │ </>
ℹ A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
ℹ Unsafe fix: Remove the Fragment
2 │ ····<>foo</>
│ -- ---
<></>code-block.jsx:1:1 lint/complexity/noUselessFragments ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Avoid using unnecessary Fragment.
> 1 │ <></>
│ ^^^^^
2 │
ℹ A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
¥Valid
<> <Foo /> <Bar /></><>foo {bar}</>¥Related links