ESLint 规则禁止在 JSX 中使用对象字面量

Question

This article 说：注意 JSX 中的对象文字

Once your components become more “pure”, you start detecting bad patterns that lead to useless rerenders. The most common is the usage of object literals in JSX, which I like to call “The infamous {{”. Let me give you an example:

import React from 'react'; 
import MyTableComponent from './MyTableComponent';

const Datagrid = (props) => (
     <MyTableComponent style={{ marginTop: 10 }}>
         ...
     </MyTableComponent> 
 )

The style prop of the component gets a new value every time the component is rendered. So even if is pure, it will be rendered every time is rendered. In fact, each time you pass an object literal as prop to a child component, you break purity. The solution is simple:

import React from 'react'; 
import MyTableComponent from  './MyTableComponent';

const tableStyle = { marginTop: 10 }; 

const Datagrid = (props) => (
     <MyTableComponent style={tableStyle}>
         ...
     </MyTableComponent> 
)

This looks very basic, but I’ve seen this mistake so many times that I’ve > developed a sense for detecting the infamous {{ in JSX. I routinely replace it with constants.

所以我的问题是，是否有任何规则阻止在 jsx 中使用对象字面量？

我正在寻找一个，但还没有结果。

Answer 1

编辑

我找到了这个插件 https://github.com/cvazac/eslint-plugin-react-perf in one comment below this article: React.js pure render performance anti-pattern。

此插件提供以下规则：

react-perf/jsx-no-new-object-as-prop：防止 {...} 作为 JSX prop 值
react-perf/jsx-no-new-array-as-prop：防止 [...] 作为 JSX prop 值
react-perf/jsx-no-new-function-as-prop: Prevent function as JSX prop value
react-perf/jsx-no-jsx-as-prop: 阻止 JSX 作为 JSX 属性值

我认为这正是您所需要的。

根据我对 https://github.com/yannickcr/eslint-plugin-react 的快速浏览，我找不到与此问题相关的任何规则。我认为现在是拉取请求的好时机！

现在您可以使用 jsx-no-bind 规则来检查在每个 render 上创建的额外函数，因此多亏了这个规则，您还可以防止组件中的额外渲染。

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

ESLint 规则禁止在 JSX 中使用对象字面量

ESLint rule forbidding Object Literals in JSX

lint

reactjs

eslint