React组件能否挂载对象/变量？ESLint no-undef错误求解

嘿，我完全懂你这个困扰！同样的代码在React Native里跑顺得很，到了Create React App里就被ESLint的no-undef规则卡脖子，而且这个规则确实不能随便关——毕竟它能帮我们揪出很多未定义变量的坑。下面给你几个在React组件上挂载变量/对象的最优方案，完美适配需要引用this.props的场景：

如果你用的是类组件，直接在组件类里定义实例属性，或者在constructor里初始化就行。这样ESLint能明确识别到这些变量是组件实例的一部分，绝对不会触发no-undef，还能自然访问this.props：

class MyComponent extends React.Component {
  // 直接定义实例属性，能直接引用this.props
  myCustomObject = {
    someProp: this.props.someValue,
    anotherProp: '自定义内容'
  };

  constructor(props) {
    super(props);
    // 也可以在constructor里初始化，同样能拿到props
    this.tempVariable = props.tempValue;
  }

  render() {
    // 使用的时候直接通过this访问就行
    return <div>{this.myCustomObject.someProp}</div>;
  }
}

如果是函数组件，没有this可以挂载，那就分两种场景选工具：

• 不需要触发重渲染的变量（比如存DOM引用、定时器ID、静态对象）：用useRef

import { useRef, useEffect } from 'react';

function MyComponent(props) {
  const myCustomRef = useRef();

  useEffect(() => {
    // 在effect里初始化，能轻松访问props
    myCustomRef.current = {
      someProp: props.someValue,
      timerId: setTimeout(() => {}, 1000)
    };
  }, [props.someValue]);

  // 使用的时候取current属性就行
  return <div>{myCustomRef.current?.someProp}</div>;
}

• 变量变化需要触发组件更新：用useState

import { useState, useEffect } from 'react';

function MyComponent(props) {
  const [myCustomState, setMyCustomState] = useState({});

  useEffect(() => {
    // 依赖props更新状态
    setMyCustomState({
      someProp: props.someValue
    });
  }, [props.someValue]);

  return <div>{myCustomState.someProp}</div>;
}

如果你只是临时调试或者兼容老代码，不想改结构，可以在文件顶部加个ESLint注释，声明某个变量是全局的：

/* global myTempVariable */

但这个方案真的只适合应急，长期用会废掉no-undef的检查意义，还是尽量用前面的规范写法。

另外关于调整ESLint到React Native风格：其实CRA用的是eslint-config-react-app，React Native用的是eslint-config-react-native，你可以尝试安装后者并在.eslintrc里继承，但大概率会和CRA的默认配置冲突，调起来很麻烦，不如直接用上面的规范写法来得省心。

内容的提问来源于stack exchange，提问作者dan674