小编Nal*_*hin的帖子

我正在为带有情感样式的组件编写单元测试。

import React from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';

const Selected = styled.div`
  width: 40%;
  height: auto;
  background: ${props => props.color};
`;

const SelectedColor = ({ color }) => {
  return <Selected color={color} />;
};

我已经编写了这个测试，但它从未通过。

  it('Should change the background color', () => {
    const color = 'rgb(140, 52, 30)';

    const { container } = render(<SelectedColor color={color} />);

    expect(container).toHaveStyle(`background: ${color}`);
  });

我在使用样式化 API (@emotion/styled) 为从 Material-UI 库导入的组件设置样式时遇到错误。

Error:(19, 5) TS2589: Type instantiation is excessively deep and possibly infinite. 

正如一些人所建议的那样，我尝试降级到 typescript 3.5.3，但这并没有解决问题。

import * as React from 'react';
import styled from '@emotion/styled';
import TextField from '@material-ui/core/TextField';


const StyledTextField = styled(TextField)`
  margin:10px;
`;

interface InputProps {
  value: string;
  name: string;
  label: string;
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

const Input: React.FC<InputProps> = ({ value, name, label, onChange }) => {
  return (
    <StyledTextField
      value={value}
      name={name}
      onChange={onChange}
      label={label}
    />
  );
};

export default Input;

在我的项目中，我有很多动态填充的数组。每当我想在数组上使用过滤器，映射或任何其他方法时，有什么方法可以跳过检查数组长度的方法吗？

const newArray = array.length ? array.filter(n=>n.id=id) : [];

const otherArray = array.length ? array.map(n=>n.id=id) : [];