Table of Contents

1. 这是一个面试项目，赐教还有哪些需要优化的地方？
2. 项目需求
3. 我的代码

这是一个面试项目，赐教还有哪些需要优化的地方？

这是一个公司的面试小项目，根据数据生成多选框，要有一个全选的选项目，这是我的代码，请问还有哪些需要改进的地方和不足？因为对方不回复，只能来这里求教。

项目需求

1. 写一个多选框小组件;
2. 需要有单元测试
3. 有全选选项目
4. 样式符合需求
5. 用 react,typescript,jest 技术
6. 全程不能出现中文
7. 需要有意义的注释
8. 代码尽量优美
9. 取名优美
10. 最后提交 PR 审核

我的代码

• 多选框组件 MultiCheck.tsx

   import React, { useState, useEffect, FunctionComponent } from "react"; import { fpMap, pipe } from "../utils"; import "./MultiCheck.css"; export type Option = { label: string; value: string; checked: boolean; }; /** * Notice: * 1. There should be a special `Select All` option with checkbox to control all passing options * 2. If columns > 1, the options should be placed from top to bottom in each column * * @param {string} label - the label text of this component * @param {Option[]} options - options * @param {number} columns - default value is 1 * @param {Function} onChange - when checked options are changed, * they should be passed to outside */ type Props = { label?: string; options: Option[]; columns?: number; onChange?: (options: Option[]) => void; }; const selectAll = (c = false) => ({ label: "Select All", value: "Select All", checked: c }); const MultiCheck: FunctionComponent<Props> = (props): JSX.Element => { const { label = "", columns = 1, OnChange= () => {} } = props; const [value, setValue] = useState({}); // for call props.onChange const [options, setOptions] = useState<Option[]>([ /* if original options all checked */ selectAll(!hasUnchecked(props.options)), ...props.options ]); function hasUnchecked(o: Option[]) { return o.filter(o => o.value !== selectAll().value).some(o => !o.checked); } function _handleClick(o: Option): void { /* user toggle click checkbox */ const cOnvertCheck= fpMap(i => { if (i.value === o.value) { return { ...i, checked: !o.checked }; } return i; }); /* user toggle click SelectAll option */ const cOnvertSelectAll= fpMap(i => { if (selectAll().value === o.value) { return { ...i, checked: !o.checked }; } return i; }); /* if all other option checked than SelectAll option checked else unchecked */ const isAllChecked = (o: Option[]) => { return fpMap(i => { if (i.value === selectAll().value) { return { ...i, checked: !hasUnchecked(o) }; } return i; })(o); }; setOptions(prev => pipe(convertCheck, convertSelectAll, isAllChecked)(prev) ); setValue(o); } function _getColumns(n: number): number { return n > 0 ? Math.ceil(options.length / n) : 1; } useEffect(() => { /* selectAll option can not be pass outside */ onChange(options.filter(i => i.value !== selectAll().value)); }, [value]); return ( <div className="multi-check-container"> <div className="multi-check"> <div className="multi-check-label"> <label>{label}</label> </div> <div className="multi-check-items" style={{ gridTemplateRows: `repeat(${_getColumns(columns)},auto)` }} > {fpMap(o => ( <label className="multi-check-item" key={o.value}> <input type="checkbox" value={o.value} checked={o.checked} OnChange={() => _handleClick(o)} /> <span></span> <div>{o.label}</div> </label> ))(options)} </div> </div> </div> ); }; export default MultiCheck; 

• 测试用例

   import "@testing-library/jest-dom"; import React from "react"; import renderer from "react-test-renderer"; import { fireEvent, render, screen } from "@testing-library/react"; import { fpMap, pipe } from "../utils"; import MultiCheck from "./MultiCheck"; describe("MultiCheck", () => { describe("initialize", () => { it("renders correctly", () => { const tree = renderer.create(<MultiCheck optiOns={[]} />).toJSON(); expect(tree).toMatchSnapshot(); }); it("renders the label if label provided", () => { const label = "jest test"; render(<MultiCheck optiOns={[]} label={label} />); expect(screen.queryByLabelText(label)).toBeDefined(); }); it("render and click checkbox", () => { const optiOns= [{ label: "test", value: "test", checked: false }]; render(<MultiCheck optiOns={options} />); expect(screen.queryByLabelText(/test/i)).not.toBeChecked(); // simulate user click checkbox fireEvent.click(screen.getByLabelText(/test/i)); expect(screen.queryByLabelText(/test/i)).toBeChecked(); }); }); describe("utils", () => { it("fpMap", () => { let arr = [1, 2, 3]; let add1 = (o: number) => o + 1; expect(fpMap(add1)(arr)).toEqual([2, 3, 4]); }); it("pipe", () => { let arr = [1, 2, 3]; let add1Each = (i: []) => i.map(o => o + 1); let prod2Each = (i: []) => i.map(o => o * 2); expect(pipe(add1Each, prod2Each)(arr)).toEqual([4, 6, 8]); }); }); }); 

• 工具代码 utils.ts

   type fn = (arg: any) => any; // functional programming for map iterator export function fpMap(func: fn): fn { return function(arr: unknown[]): unknown[] { let length: number = arr.length || 0; let i: number = 0; let result: unknown[] = []; while (i < length) { result.push(func(arr[i])); i++; } return result; }; } // functional programming pipe export function pipe(...fns: fn[]): fn { return function(x: any) { return fns.reduce((v: any, f: fn) => f(v), x); }; }