jsx-eslint/eslint-plugin-react

Rule proposal: enforce shape of dangerouslySetInnerHTML

Open

#711 创建于 2016年7月26日

在 GitHub 查看
 (2 评论) (0 反应) (0 负责人)JavaScript (8,630 star) (2,797 fork)batch import
help wantednew rulequestion

描述

React will issue a warning if you try to use dangerouslySetInnerHTML with a value of the wrong shape.

https://github.com/facebook/react/blob/85dcbf83/src/renderers/dom/shared/ReactDOMComponent.js#L173-L177

This should be easy enough to enforce for most cases with a linter rule.

Bad:

<div dangerouslySetInnerHTML={{ }} />

<div dangerouslySetInnerHTML={{ html: 'HTML' }} />

<div dangerouslySetInnerHTML={true} />

Good:

<div dangerouslySetInnerHTML={{ __html: 'HTML' }} />

贡献者指南

技术栈
javascriptreact
领域
developer experiencetooling
议题类型
feature
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
2
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-3 hours
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
stale
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
JavaScriptReactESLint plugin development basics
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
70
研究方向
Examine the existing rules in eslint plugin react (e.g., lib/rules/) for structure. Understand how to write an ESLint rule using AST selectors. The issue references a React source file (ReactDOMComponent.js) for the expected shape. Implement a rule that checks the argument to dangerouslySetInnerHTML matches { html: string }.