在 react-admin 中，如何为 UrlField href 添加前缀？

Question

假设我有以下内容：

<UrlField source='fbUsername' />

如果结果是 fb username foo ，则此链接相对于/foo 。

(?) 我如何将这个 url 作为前缀：

https://facebook.com/

所以结果是：

https://facebook.com/${fbUsername}

https://facebook.com/foo

Answer 1

<UrlField>仅接受 URL 值。 对于您的用例，您应该基于UrlField源编写自定义字段。 就像是：

import * as React from 'react';
import { Link } from '@material-ui/core';
import { useRecordContext } from 'react-admin';

const MyUrlField = ({ source }) => {
    const record = useRecordContext();
    const value = record && record[source];

    if (value == null) {
        return null;
    }

    return (
        <Link href={`https://facebook.com/${value}`}>
            {value}
        </Link>
    );
});

MyUrlField.defaultProps = {
    addLabel: true,
};

Answer 2

根据@françois-zaninotto 的回答，我修复了一个语法错误，修复了一些缺失的 useRecordContext() 参数，使其工作：

// ###############################################
// FbUrlField.js
import * as React from 'react';
import { Link } from '@material-ui/core';
import { useRecordContext } from 'react-admin';

const FbUrlField = ( props ) =>
{
    const { source, target, rel } = props;
    const record = useRecordContext(props);
    const value = record && record[source];

    if (value == null) {
        return null;
    }

    return (
        <Link href={`https://facebook.com/${value}`} target={target} rel={rel}>
            {value}
        </Link>
    );
};

FbUrlField.defaultProps = {
    addLabel: true,
};

export default FbUrlField;


// ###############################################
// SomeList.js
import FbUrlField from './FbUrlField';
[...]
<FbUrlField
    label='FB'
    source='fbUsername'
    target='_blank' // New window
    rel="noopener noreferrer" // For security
/>

Answer 3

我是反应管理员的新手。 我正在按照教程进行操作并遇到了做这样的事情的想法，因为用户的网站只是 bla.com 并且它实际上不起作用因为你得到http://localhost:xxxx/bla.com作为链接。 我在 typescript 中想出了这个方法来做到这一点。对它持保留态度：

/// user-url.field.tsx
import { UrlField, useRecordContext } from 'react-admin';

export const UserURLField = ({source}: {source: string}) => {
  const record = useRecordContext();
  const fakeRecord = {
    [source]: `http://${record[source]}`,
  };
  return (
  <UrlField source={source} record={fakeRecord}></UrlField>
  );
};