为按钮设置不同的路径

Question

我正在使用 react-admin 框架，我正在尝试将两个不同的路径设置为两个不同的 <EditButton/>。

到目前为止，我已经创建了自定义组件，它将按钮呈现为操作组件。

例如，我希望一个按钮的路径为 edit/somepath，而另一个按钮的默认编辑路径为 /edit。

到目前为止我试过这个：

   var getId = this.props.data;
   if (getId !== undefined) {
    var yey = getId["id"];
   }
   return (
    <CardActions>
     {bulkActions && React.cloneElement(bulkActions, {
      basePath,
      filterValues,
      resource,
      selectedIds,
      onUnselectItems
     })}
     <EditButton basePath={basePath}/>
     <EditButton
      label="Upravit JSON"
      basePath={yey}
     />
    </CardActions>
   );

第一个按钮应该有简单的 /edit 路径，现在重定向到 /basePath/undefined。第二个按钮重定向到 basePath/edit/somepath/edit/somepath/undefined，我觉得这很奇怪，因为我的变量 yey 只存储字符串 edit/somepath.

我真的被困在这里，所以任何帮助将不胜感激。

提前致谢。

Answer 1

我从未使用过react-admin，但查看回购协议和源代码，该组件看起来像这样：

const EditButton = ({
  basePath = '',
  label = 'ra.action.edit',
  record = {},
  icon = <ContentCreate />,
  ...rest
}) => (
  <Button
    component={Link}
    to={linkToRecord(basePath, record.id)}
    label={label}
    onClick={stopPropagation}
    {...rest}
>
    {icon}
  </Button>
);

所以看起来 to 属性连接了您的 basePath 和道具中的 record.id - 我猜这就是您的代码中缺少的内容！

希望对您有所帮助！

Answer 2

我遇到了类似的事情，为了 CSS 的目的，我需要用 div 包装 EditButton 并且丢失了记录上下文（它是 undefined）。

所以我将它提取到 CustomEditButton 并且我将它传递给 basePath & record.id 在它的 to 道具上，这是一个经过测试的工作示例：

const CustomEditButton = ({ record, basePath }) => {
  return <div>
    <EditButton to={`${basePath}/${record.id}`}/>
  </div>
}

为按钮设置不同的路径

Set different paths to buttons

button

reactjs

react-admin