React admin传递一个className给自定义组件

Question

我在一个自定义按钮的反应管理项目中得到了一个datagrid，因为它在一个datagrid中，按钮被包装成一个td标签，我怎么能针对这个td包装我的按钮，我试着给他一个className1 but it's telling me I can't because 类型'{className: string;}'不能赋值给类型'IntrinsicAttributes &CreateOrganizationButtonProps , how is the rule in react? Can't I assign a component of mine a className ? And how to target this special td '由react admin创建?

import {
  List,
  Datagrid,
  TextField,
  TopToolbar,
  CreateButton,
  ExportButton,
  TextInput,
  useRecordContext,
  useListController,
  ListContextProvider,
} from "react-admin";
import OrganizationsPanel from "./components/organizations-list-panel";
import CreateOrganizationButton from "./components/create-organization-button";
import { useEffect, useRef, useState } from "react";
const ListActions = () => (
  <TopToolbar>
    <CreateButton />
    <ExportButton />
  </TopToolbar>
);
const organizationsFilters = [<TextInput label="Search" source="q" alwaysOn />];
export const OrganizationsList = (props: any) => {
  return (
    <List
      className="custom-list"
      {...props}
      filters={organizationsFilters}
      filter={{ parentOrganizationId: localStorage.getItem("oid") }}
      sx={{
        "& .RaList-content": {
          boxShadow: "none",
        },
      }}
      actions={<ListActions />}
    >
      <Datagrid
        className="custom-list-grid"
        rowClick="edit"
        sx={{
          "& .RaDatagrid-row": {
            border: "none",
            width: "100%",
          },
          "& .RaDatagrid-row:hover .create-organization-button": {
            visibility: "inherit",
          },
          "& .RaDatagrid-row .create-organization-button": {
            visibility: "inherit",
          },
        }}
        bulkActionButtons={false}
        expand={<OrganizationsPanel />}
      >
        <TextField source="name" />
        <CreateOrganizationButton className='salut'/>
      </Datagrid>
    </List>
  );
};

import React, { useState } from "react";
import { IconButton } from "@mui/material";
import { Link } from "react-router-dom";
import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
import { useRecordContext } from "react-admin";
const CreateOrganizationButton: React.FC<CreateOrganizationButtonProps> =
  () => {
    const record = useRecordContext();
    return (
      <IconButton
        className="create-organization-button"
        component={Link}
        to={{
          pathname: "/organizations/create",
          search: `?source=${JSON.stringify({
            parentOrganizationId: record.id,
          })}`,
        }}
        sx={{
          position: "relative",
          top: 0,
        }}
        onClick={(event: any) => event.stopPropagation()}
      >
        <AddCircleOutlineIcon color="primary" />
      </IconButton>
    );
  };
interface CreateOrganizationButtonProps {}
export default CreateOrganizationButton;

Answer 1

在您的CreateOrganizationButton组件中，您已经定义了期望传入的道具。

const CreateOrganizationButton: React.FC<CreateOrganizationButtonProps>

上面一行表示CreateOrganizationButton的类型是React.FC，它期望接收CreateOrganizationButtonProps。

您已将CreateOrganizationButtonProps定义为:

interface CreateOrganizationButtonProps {}

上面一行表示CreateOrganizationButtonProps预计是一个空对象。你可能想把它改成这样:

interface CreateOrganizationButtonProps {
    className: string;
}

现在您应该不再得到您所看到的错误。但是还有一个步骤可以让你传入的className做一些事情。

你会想要使用你传入的className。

首先，我们想从CreateOrganizationButton中的props中获得className。你可以使用prop解构来实现:

const CreateOrganizationButton: React.FC<CreateOrganizationButtonProps> =
  ({ className }) => {
...

当前CreateOrganizationButton中的<IconButton>已经有"create-organization-button"的className。您可以将其更改为您正在传递的className，以使用它:

      <IconButton
        className={className}
      ...