Skip to content

noDangerouslySetInnerHtmlWithChildren

诊断类别:lint/security/noDangerouslySetInnerHtmlWithChildren

¥Diagnostic Category: lint/security/noDangerouslySetInnerHtmlWithChildren

自从:v1.0.0

¥Since: v1.0.0

来源:

¥Sources:

报告 DOM 元素或组件同时使用 childrendangerouslySetInnerHTML prop 的情况。

¥Report when a DOM element or a component uses both children and dangerouslySetInnerHTML prop.

¥Examples

¥Invalid

function createMarkup() {
return { __html: 'child' }
}
<Component dangerouslySetInnerHTML={createMarkup()}>"child1"</Component>
code-block.jsx:4:12 lint/security/noDangerouslySetInnerHtmlWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Avoid passing both children and the dangerouslySetInnerHTML prop.

2 │ return { __html: ‘child’ }
3 │ }
> 4 │ <Component dangerouslySetInnerHTML={createMarkup()}>“child1”</Component>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
5 │

This is the source of the children prop

2 │ return { __html: ‘child’ }
3 │ }
> 4 │ <Component dangerouslySetInnerHTML={createMarkup()}>“child1”</Component>
^^^^^^^^
5 │

Setting HTML content will inadvertently override any passed children in React

function createMarkup() {
return { __html: 'child' }
}
<Component dangerouslySetInnerHTML={createMarkup()} children="child1" />
code-block.jsx:4:12 lint/security/noDangerouslySetInnerHtmlWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Avoid passing both children and the dangerouslySetInnerHTML prop.

2 │ return { __html: ‘child’ }
3 │ }
> 4 │ <Component dangerouslySetInnerHTML={createMarkup()} children=“child1” />
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
5 │

This is the source of the children prop

2 │ return { __html: ‘child’ }
3 │ }
> 4 │ <Component dangerouslySetInnerHTML={createMarkup()} children=“child1” />
^^^^^^^^^^^^^^^^^
5 │

Setting HTML content will inadvertently override any passed children in React

React.createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' } }, 'children')
code-block.js:1:30 lint/security/noDangerouslySetInnerHtmlWithChildren ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Avoid passing both children and the dangerouslySetInnerHTML prop.

> 1 │ React.createElement(‘div’, { dangerouslySetInnerHTML: { __html: ‘HTML’ } }, ‘children’)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │

This is the source of the children prop

> 1 │ React.createElement(‘div’, { dangerouslySetInnerHTML: { __html: ‘HTML’ } }, ‘children’)
^^^^^^^^^^
2 │

Setting HTML content will inadvertently override any passed children in React

¥Related links