![](/img/trans.png)
[英]How can I conditionally format the label for a field in react-admin?
[英]In react-admin, how can I prefix a UrlField href?
假設我有以下內容:
<UrlField source='fbUsername' />
如果結果是 fb username foo
,則此鏈接相對於/foo
。
(?) 我如何將這個 url 作為前綴:
https://facebook.com/
所以結果是:
https://facebook.com/${fbUsername}
https://facebook.com/foo
<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,
};
根據@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
/>
我是反應管理員的新手。 我正在按照教程進行操作並遇到了做這樣的事情的想法,因為用戶的網站只是 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>
);
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.