eslint-config-ts-lib/docs/rules/react/jsx-no-comment-textnodes.md

ts-lib-scripts创建的ts库项目使用的ESLint配置

# react/jsx-no-comment-textnodes

> 来自 [undefined](undefined) 的规则。

# Prevent comments from being inserted as text nodes (react/jsx-no-comment-textnodes)

This rule prevents comment strings (e.g. beginning with `//` or `/*`) from being accidentally
injected as a text node in JSX statements.

## Rule Details

Examples of **incorrect** code for this rule:

```jsx
var Hello = createReactClass({
  render: function () {
    return <div>// empty div</div>;
  },
});

var Hello = createReactClass({
  render: function () {
    return <div>/* empty div */</div>;
  },
});
```

Examples of **correct** code for this rule:

```jsx
var Hello = createReactClass({
  displayName: 'Hello',
  render: function() {
    return <div>{/* empty div */}</div>;
  }
});

var Hello = createReactClass({
  displayName: 'Hello',
  render: function() {
    return <div /* empty div */></div>;
  }
});

var Hello = createReactClass({
  displayName: 'Hello',
  render: function() {
    return <div className={'foo' /* temp class */}</div>;
  }
});
```

## Legitimate uses

It's possible you may want to legitimately output comment start characters (`//` or `/*`) in a JSX text node. In which case, you can do the following:

```jsx
var Hello = createReactClass({
  render: function () {
    return <div>{"/* This will be output as a text node */"}</div>;
  },
});
```

## 参考文档

- [react/jsx-no-comment-textnodes 官方文档](https://github.com/yannickcr/eslint-plugin-react/blob/HEAD/docs/rules/jsx-no-comment-textnodes.md)