[英]In react-admin, how can I prefix a UrlField href?
Let's say I have the following:假设我有以下内容:
<UrlField source='fbUsername' />
If the result is fb username foo
, this links relatively to /foo
.如果结果是 fb username
foo
,则此链接相对于/foo
。
(?) How can I prefix this url to: (?) 我如何将这个 url 作为前缀:
https://facebook.com/
So the result would be:所以结果是:
https://facebook.com/${fbUsername}
https://facebook.com/foo
<UrlField>
only accepts a URL value. <UrlField>
仅接受 URL 值。 For your use case, you should write a custom field based on the UrlField
source .对于您的用例,您应该基于
UrlField
源编写自定义字段。 Something like:就像是:
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,
};
Based on @françois-zaninotto 's answer, I fixed a syntax error fixed some of the missing useRecordContext() param that made it work:根据@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
/>
I'm new to react-admin.我是反应管理员的新手。 I was following the tutorial and came across the idea of doing something like this because the user's website is just bla.com and it doesn't actually work because you get
http://localhost:xxxx/bla.com
as a link.我正在按照教程进行操作并遇到了做这样的事情的想法,因为用户的网站只是 bla.com 并且它实际上不起作用因为你得到
http://localhost:xxxx/bla.com
作为链接。 I came up with this method to do it, in typescript. Take it with a grain of salt:我在 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>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.