ESLint规则禁止在JSX中使用Object Literals

Question

本文说:小心JSX中的对象文字

一旦您的组件变得更"纯粹",您就会开始检测导致无用重新渲染的错误模式.最常见的是在JSX中使用对象文字,我喜欢称之为"臭名昭着的{{".让我给你举个例子:

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

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

每次呈现组件时,组件的样式prop都会获得一个新值.因此,即使是纯粹的,也会在每次呈现时呈现.实际上,每次将对象文字作为prop传递给子组件时,都会破坏纯度.解决方案很简单:

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

const tableStyle = { marginTop: 10 }; 

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

这看起来非常基本,但我已经多次看到这个错误了,我已经发现了检测臭名昭着的{{在JSX中.我经常用常量替换它.

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

我想找一个,但还没有结果.

Answer 1

编辑

我发现这个插件https://github.com/cvazac/eslint-plugin-react-perf在一个评论下面这篇文章:React.js纯渲染性能的反模式.

此插件提供以下规则:

• react-perf/jsx-no-new-object-as-prop:防止{...}作为JSX prop值
• react-perf/jsx-no-new-array-as-prop:防止[...]作为JSX道具价值
• react-perf/jsx-no-new-function-as-prop:防止作为JSX prop值的函数
• react-perf/jsx-no-jsx-as-prop:防止JSX作为JSX prop值

我认为这正是你所需要的.

根据我的快速浏览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