小编Ant*_*ish的帖子

我有一个组件，它使用钩子将输入值设置为组件状态。当输入值的长度超过 0 个字符时，我想添加一个类，但是我遇到了一个问题，TypeScript 说我的 ref 可能未定义。

即使我检查 ref 是否存在于包装代码以添加类的条件中，我也无法摆脱这个错误。我不确定这个问题的解决方案。

错误： Object is possibly 'undefined'开 inputValue.current.classList.add(inputHasContentClassName);

import React, { useState, useEffect, useRef } from 'react';

const Component: React.FC = () => {
  const [inputValue, setInputValue] = useState('');
  const myRef = useRef();

  useEffect(() => {
    const inputHasContentClassName = 'input--has-value';

    if (inputValue.length > 0 && inputValue) {
      inputValue.current.classList.add(inputHasContentClassName);
    } else {
      inputValue.current.classList.remove(inputHasContentClassName);
    }
  }, [inputValue]);

  function handleInputChange(e: React.FormEvent<HTMLInputElement>) {
    setInputValue(e.currentTarget.value);
  }

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();

    console.log('Submit form');
  }

  return (
    <> …

我有一个带有一些静态方法的辅助类：

export default class MyHelper {
    private constructor() {}
    private static privateMethod() {}
    public static publicHelperMethod() {}
}

我有一个使用 publicHelperMethod 的 React 组件，我想确保这个特定方法在我的 props 声明中传递。

我尝试的方法是：

type LoggerMethod = MyHelper.publicHelperMethod;

但这会引发错误，并表示 MyHelper 正被用作命名空间。

我可以使类本身成为一种类型：

type Helper = MyHelper;

但我只对我的记录器方法（这个抽象中的公共助手）感兴趣。

是否可以将类的方法设为类型？如果是这样，其语法是什么？

或者，我的处理方式完全错误吗？

我对用 JSX 文件编写的 TSX 文件进行了测试，该文件因意外令牌而无法运行：

Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

我有另一个用 JSX 编写的测试，用于运行的 JSX 文件。我正在使用 React 测试库，但我认为这不是问题，因为文件导入的测试失败。

堆栈跟踪：

 export { default as add } from './add.js';
^^^^^^

SyntaxError: Unexpected token export

  1 | import React from 'react'; …

我目前正在创建一个内容块，它的高度取决于它的内容。块的一端需要有一个箭头，可以缩放到块的高度。

如果可能的话，我理想地想要一个纯 CSS 解决方案。我目前正在使用边界三角形方法：https : //css-tricks.com/snippets/css/css-triangle/

这很好用，如下面我的小提琴所示，但是如果你增加 div 的高度，那么它不会将三角形重新缩放到新的高度。

https://jsfiddle.net/xq5wwf3h/10/

<div id="triangle-container">
    Some interesting content goes in here!
</div>

body * {
    box-sizing: border-box;
}

#triangle-container {
    position: relative;
    height: 100px;
    width: 100%;
    background: grey;
    margin-left:50px;
    color: #fff;
    padding: 15px;
}

#triangle-container:before {
    content: '';
    position: absolute;
    left: -50px;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 50px 50px 0;
    border-color: transparent #007bff transparent transparent;
}

我目前正在使用react-spring动画库。

在文档中的某些CodeSandbox演示（例如https://codesandbox.io/embed/j150ykxrv）中，导入了一些称为“动画”的东西：

import { Transition, animated } from 'react-spring'

然后像这样使用：

  {this.state.items.map(item => styles => <animated.li style={{ ...defaultStyles, ...styles }}>{item}</animated.li>)}

在其他示例中，未使用：

import { Spring } from 'react-spring'

<Spring
  from={{ opacity: 0 }}
  to={{ opacity: 1 }}>
  {props => <div style={props}>??</div>}
</Spring>

我在文档中找不到有关此功能或使用原因的任何提及，因为您似乎可以通过将动画样式道具传递到组件中来进行动画处理。

文档中的用途是否是旧版本的一部分？

我正在尝试导入与 D3 库一起使用的 CSV 以在 Create React App 项目中创建图表，但即使 CSV 文件的路径正确，导入文件也会引发“找不到模块”错误。

我有一种感觉，这可能与 CRA 的 Webpack 配置有关，但看起来这是使用文件加载器，所以我不确定问题是什么。数据文件位于 CRA 的 src 目录中。

下面代码中的控制台日志正在以正确的数据运行，这意味着必须正在访问数据。在此之后抛出错误（尽管 CSV 的路径在我的编辑器中带有红色下划线）。

我正在使用 TypeScript，但我认为这与问题无关。

import React from 'react';
import * as d3 from 'd3';
import CSVData from '../data/data.csv';

const BarChart: React.FC = () => {
  d3.csv(CSVData).then(res => {
    console.log(res);
  });
  return <div>Test</div>;
};

export default BarChart;

我有一个使用 Webpack、ESlint、Prettier 和 TypeScript 的 React 构建配置。

当我运行构建时，似乎遇到了 TypeScript linting 错误，这些错误应该由 @typings/react 或 @typings/react-dom 包消除。

查看文档，我不需要为 React 组件定义可访问性修饰符或返回类型：https://www.typescriptlang.org/docs/handbook/jsx.html

这似乎与这里的问题相同：Missing return type on function - in react (typescript) code

但安装打字包并没有解决我的问题。请注意，我还尝试删除该@typings/react包，因为@typings/react-dom它具有依赖项，但这并不能解决问题。

Webpack 配置

const webpack = require('webpack');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const path = require('path');

const createWebpackConfig = () => {
  const isProd =
    process.env &&
    process.env.NODE_ENV &&
    process.env.NODE_ENV === 'production';

  return {
    entry: ['@babel/polyfill', './index.tsx'],
    mode: isProd ? 'production' : 'development',
    module: {
      rules: [ …