如何使用nextjs和chakrui处理url

Question

当我们直接使用带有chakrui(eg.Text(组件的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>
);
};

Answer 1

解决方案是；

创建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>
)
}

问题解决了！谢谢

Answer 2

在当前版本中，即"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'}}}>