@stylistic/jsx/

jsx-self-closing-comp

子要素のないコンポーネントに対して余分な終了タグを使用できません。

子要素のないコンポーネントは、余分な終了タグを避けるために自己完結させることができます。

ルールの詳細

このルールに違反するコードの例

var HelloJohn = <Hello name="John"></Hello>;

var HelloJohnCompound = <Hello.Compound name="John"></Hello.Compound>;

このルールに適合するコードの例

var contentContainer = <div className="content"></div>;

var intentionalSpace = <div>{' '}</div>;

var HelloJohn = <Hello name="John" />;

var HelloJohnCompound = <Hello.Compound name="John" />;

var Profile = <Hello name="John"><img src="picture.png" /></Hello>;

var ProfileCompound = <Hello.Compound name="John"><img src="picture.png" /></Hello.Compound>;

var HelloSpace = <Hello>{' '}</Hello>;

```js

ルール オプション

...
"@stylistic/jsx/jsx-self-closing-comp": ["error", {
  "component": true,
  "html": true
}]
...

js

```js

このルールに違反するコードの例

var HelloJohn = <Hello name="John"></Hello>;

このルールに適合するコードの例

var contentContainer = <div className="content"></div>;

var intentionalSpace = <div>{' '}</div>;

var HelloJohn = <Hello name="John" />;

var HelloJohnCompound = <Hello.Compound name="John" />;

var Profile = <Hello name="John"><img src="picture.png" /></Hello>;

var ProfileCompound = <Hello.Compound name="John"><img src="picture.png" /></Hello.Compound>;

component

true の場合、カスタム コンポーネント タグは自己完結する必要があります。

このルールに違反するコードの例

var contentContainer = <div className="content"></div>;

このルールに適合するコードの例

var contentContainer = <div className="content" />;

var contentContainer = <div className="content"><div /></div>;

var intentionalSpace = <div>{' '}</div>;