如何通过道具反应功能组件使用react表和类型记录？

Question

我想传递两个参数来使用react表和类型记录来反应功能组件。

下面是我的代码，

type NameCellValue = {
    name: string;
    type: string;
}

type NameCellProps = {
    value: NameCellValue;
    mode: Mode;
    canOpen: boolean;
}

const NameCell: React.FC<NameCellProps> = ({
    value: {name,type},
    mode,
    canOpen
}) => {
    console.log(mode) //this is undefined
    console.log(canOpen) //this is undefined
    canOpen: boolean,
}

const buildColumns : (
    mode: Mode,
    canOpen?: boolean
) => Column<Data>[] = (mode, canOpen) => [
    {
        Header: 'Name',
        id: 'name',
        accessor: ({name, type}) => ({
            name,
            type,
        }),
        Cell: NameCell(mode, canOpen), //how do i pass mode and canOpen to NameCell
    } as Column<Data, NameCellProps['value'] | NameCellProps['mode] | NameCellProps['canOpen']>,
    ];


const ParentComponent = () => {
    const columns = buildColumns(mode, canOpen);
    return (
        //some jsx
    );
}

上面的方法不起作用。它给出了错误“类型模式的参数不能在线分配给PropsWithChildren类型的参数”

Cell: NameCell(mode, canOpen)

另外，当我在NameCell中记录NameCell和NameCell的值时，它们是未定义的。

有人能帮我解决这个问题吗。谢谢。

Answer 1

您应该始终使用角括号语法呈现react组件，例如：

<NameCell value={value} mode={myModeHere} canOpen />

可以直接调用函数，但必须将道具作为对象传递，如下所示：

NameCell({ value, mode: myModeHere, canOpen: true })

但是，使用尖括号，如第一个例子，除非你有一个非常好的理由。