无法读取 null 的属性（读取“useRef”）错误

Question

各位！我有一个关于

useRef

的问题。我正在使用 rollupJS 捆绑一个小型 UI 库。在我捆绑该库之前，内部带有

useRef

的组件工作正常，但是当我尝试导入它时，我看到以下错误。

有趣的是，即使我只是一个参考并且不做任何事情（不要添加

useEffect

）我也遇到了同样的错误。

Input.tsx

import React from "react";

import styles from "./styles.module.scss";

export interface Props {
  className?: string;
  name: string;
  label?: string;
  value?: string;
}

const Input: React.FC<Props> = (props) => {
  const inputRef = React.useRef<HTMLInputElement>(null);

  return (
    <div className={`${styles.componentWrap} ${props.className}`}>
      <input ref={inputRef} placeholder="&nbsp;" value={props.value} />
    </div>
  );
};

Input.displayName = "Input";

Input.defaultProps = {
  className: "",
  label: "Label",
} as Partial<Props>;

export default Input;

tsconfig.json

{
  "compilerOptions": {
    // Default
    "target": "es6",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,

    // Added
    "jsx": "react",
    "module": "ESNext",
    "declaration": true,
    "sourceMap": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "emitDeclarationOnly": true,
    "resolveJsonModule": true,
    "strictNullChecks": false
  },
}

rollup.config.js

import resolve from "@rollup/plugin-node-resolve";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import json from "@rollup/plugin-json";
import dts from "rollup-plugin-dts";
import styles from "rollup-plugin-styles";

export default [
  {
    input: "src/components/index.ts",
    output: [
      {
        dir: "ui",
        format: "cjs",
        sourcemap: true,
      },
    ],
    plugins: [
      peerDepsExternal(),
      resolve(),
      styles({
        modules: true,
      }),
      json(),
      commonjs(),

      typescript({
        compilerOptions: {
          declaration: true,
          declarationDir: "ui/types",
        },
        exclude: [
          "node_modules/**",
          "ui",
          "src/**/*.stories.tsx",
          "src/**/*.test.tsx",
        ],
      }),
    ],
  },
  {
    input: "ui/types/components/index.d.ts",
    output: [{ file: "ui/index.d.ts", format: "esm" }],
    plugins: [dts()],
  },
];

package.json

{
  "name": "somename",
  "version": "0.0.0",
  "description": "",
  "scripts": {
    "rollup": "rimraf ui && rollup -c",
    "storybook": "start-storybook -p 6006",
  },
  "author": "Author",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@rollup/plugin-commonjs": "^22.0.0",
    "@rollup/plugin-json": "^4.1.0",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@rollup/plugin-typescript": "^8.3.2",
    "@storybook/addon-actions": "^6.5.6",
    "@storybook/addon-essentials": "^6.5.6",
    "@storybook/addon-interactions": "^6.5.6",
    "@storybook/addon-links": "^6.5.6",
    "@storybook/builder-webpack5": "^6.5.6",
    "@storybook/manager-webpack5": "^6.5.6",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.5.6",
    "@storybook/testing-library": "^0.0.11",
    "@types/react": "^18.0.9",
    "babel-loader": "^8.2.5",
    "chromatic": "^6.5.4",
    "css-loader": "^6.7.1",
    "gsap": "^3.10.3",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "rollup": "^2.74.1",
    "rollup-plugin-copy": "^3.4.0",
    "rollup-plugin-dts": "^4.2.1",
    "rollup-plugin-multi-input": "^1.3.1",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-styles": "^4.0.0",
    "sass": "^1.52.1",
    "sass-loader": "^13.0.0",
    "style-loader": "^3.3.1",
    "typescript": "^4.7.2"
  },
  "dependencies": {}
}

不知道问题是什么，但以前可能有人遇到过同样的问题吗？预先感谢！

Answer 1

问题是您最初将 ref 值指定为

null

。另外，这是一个打字稿文件，因此打字稿会抛出错误，引用可能为空。

当读取输入组件中的值不能为空时，它会抛出错误。

您可以确保如果 ref 为 null，则不会返回任何内容，或者最好不要将

null

分配给 ref，或者在传递 ref 时，您可以在 ref 属性后添加

!

。

例如：

<input ref={inputRef!}

您可以在这里阅读更多信息：LINK