如何在 React 中将道具传递给过滤器 Table

Question

我有 DateRangeColumnFilter 组件，它是全局的，在 app.I 周围的一些组件中使用，在 React Table:

的列内渲染它

 {
            Header: timestampText,
            accessor: 'timestamp',
            collapse: true,
            Cell: (props: CellValue) => (
                <div>
                    {format(new Date(props.cell.value), 'yyyy-MM-dd')}
                </div>
            ),
            Filter: DateRangeColumnFilter,
            filter: dateBetweenFilterFunction,
        },

对于上面的渲染代码，我想传递道具，这样它就只在这个地方有特定的属性。我想将下面的代码作为道具传递。在第一个 StyledDatePicker 中，我想传递 maxDate，在第二个 StyledDatePicker 中，我想传递 minDate。并且 maxDate 和 minDate 都将仅与此渲染组件一起使用

export const DateRangeColumnFilter: FC<ColumnProps> = ({
column: { filterValue = [], setFilter, Header },
}) => {
    const [anchorEl, setAnchorEl] = useState(null);
    const handleClick = (event: any) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };

    const { useTranslationFunc } = useTranslationFacade();
    const theme = useTheme();
    const setColor = (
        value: boolean,
        firstColor: PaletteColor,
        secondColor: PaletteColor
    ) => (value ? firstColor : secondColor).toString();

    return (
        <StyledSpan>
            <StyledFilterButton aria-haspopup="true" onClick={handleClick}>
                <DateRangeIcon
                    style={{ fontSize: '20px' }}
                    htmlColor={setColor(
                        filterValue[0] || filterValue[1],
                        theme.palette.red,
                        theme.palette.black
                    )}
                />
            </StyledFilterButton>
            <StyledMenu
                id="customized-menu"
                anchorEl={anchorEl}
                keepMounted
                open={Boolean(anchorEl)}
                onClose={handleClose}
                anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
                transformOrigin={{ vertical: 'top', horizontal: 'center' }}
            >
                <StyledDescriptionDiv>{Header}</StyledDescriptionDiv>
                <StyledContainerDiv>
                    <LocalizationProvider
                        dateAdapter={AdapterDateFns}
                        locale={getCurrentLocale()}
                    >
                        <Stack spacing={3}>
                            <StyledDatePicker
                                label={useTranslationFunc('Od')}
                                value={filterValue[0] || null}
                                mask="____-__-__"
                                inputFormat="yyyy-MM-dd"
                                onChange={(newValue) => {
                                    setFilter((old = []) => [
                                        newValue ? newValue : null,
                                        old[1],
                                    ]);
                                }}
                                renderInput={(params) => (
                                    <TextField {...params} />
                                )}
                                maxDate={new Date()}
                            />
                            <StyledDatePicker
                                label={useTranslationFunc('Do')}
                                value={filterValue[1] || null}
                                mask="____-__-__"
                                inputFormat="yyyy-MM-dd"
                                onChange={(newValue) => {
                                    setFilter((old = []) => [
                                        old[0],
                                        newValue ? newValue : null,
                                    ]);
                                }}
                                renderInput={(params) => (
                                    <TextField {...params} />
                                )}
                                minDate={filterValue[0]}
                            />
                        </Stack>
                    </LocalizationProvider>
                </StyledContainerDiv>
            </StyledMenu>
        </StyledSpan>
    );
};

Answer 1

一种方法是将该过滤器设置为对象而不是字符串，例如：

const filter = { filterValue: 'whatever', extra1: <anything, object, array, string, function>, extra2: ... }

然后制作您自己的过滤器函数，从该对象中提取所需的任何内容。抱歉，我还没有工作示例，但我知道 React-table 可以将对象作为 filterValue 传递给自定义过滤器函数。这当然意味着 react-table 个预定义过滤器中的 none 将起作用。

如何在 React 中将道具传递给过滤器 Table

How to pass props to Filters in React Table

reactjs

react-table