如何使用nextjs和chakra-ui处理url?

rjzwgtxy  于 2023-06-22  发布在  其他
关注(0)|答案(2)|浏览(125)

当我们直接使用chakra-ui(例如文本)组件使用react linkify时,我们无法处理链接。

问题用例

import Linkify from 'react-linkify';
import {Box, Text} from '@chakra-ui/react';

export default function Usage(){

return (
 <Linkify>
  <Text>https://stackoverflow.com</Text>
 </Linkify>
);

};
jhiyze9q

jhiyze9q1#

解决方案是;
创建Linkify.js

Linkify.js文件:

import { Link } from '@chakra-ui/react';
import ReactLinkify from 'react-linkify';

const componentDecorator = (href, text, key) => (
  <Link
    href={href}
    key={key}
    isExternal={true}
    color="blue.500"
    _focus={{ outline: 'none' }}
  >
    {text}
  </Link>
);

export const Linkify = (props) => {
  return <ReactLinkify {...props} componentDecorator={componentDecorator} />; };

将新的Linkify组件导入文件。

用法

import { Linkify } from './Linkify';
import { Text } from '@chakra-ui/react';

export default function Usage(){
 return(
 <Linkify>
  <Text>https://stackoverflow.com</Text>
 </Linkify>
 )
}

问题解决了!谢谢...

lskq00tm

lskq00tm2#

在当前版本中,即“^1.0.0-alpha”,则删除对属性的支持。你可以这样做:

import Linkify from 'react-linkify';

<Linkify componentDecorator={(decoratedHref, decoratedText, key) => (
    <a target="blank" href={decoratedHref} key={key}>
        {decoratedText}
    </a>
  )}
>

否则,降级到版本“0.2.2”。然后,您可以更改Linkify组件的属性。对我有用!

import Linkify from 'react-linkify';

<Linkify properties={{target: "_blank", style: {color: 'blue',
 textDecoration: "underline", fontWeight: 'bold'}}}>

相关问题