Question

我有一个这样的文本（随机文本）：

bla bla bla (name of link)[link] bla bla bla (name of link)[link]

我需要用(name of link)[link] React组件替换所有Link：

<Link to={link}>name of link</Link>

我想看的东西

bla bla bla <Link to='/testRoute'>Test name</Link> bla bla bla <Link to='/testRoute'>Test name</Link>

文本中的

(name of link)[link]可能不存在，并且可以开会多次。

如何替换文本中的所有匹配项？

任何帮助将不胜感激。

Answer 1

您必须使用regexify-string（npm）

npm install-保存regexify-string

regexifyString({
        pattern: /\[.*?\]/gim,
        decorator: (match, index) => {
            return (
                <Link
                    to={SOME_ROUTE}
                    onClick={onClick}
                >
                    {match}
                </Link>
            );
        },
        input: 'Some initial string with [link]',
    });

Answer 2

尝试将bla bla bla (name of link)[link] bla bla bla (name of link)[link]字符串拆分为子字符串数组，这样您将获得以下数组：

const arrayOfStrings = [
    'bla bla bla',
    '(name of link)[link]',
    'bla bla bla',
    '(name of link)[link]',
];

然后您可以使用.map()创建带有有效React元素的新数组：

    arrayOfStrings.map((str, i) => {
        const isLink = str === '(name of link)[link]';//of course you need to replace it with regex

        if (isLink) {
            const linkName = 'name of link';//replace it with regex, so you can get dynamic link name from str
            const link = 'link';//replace it with regex, so you can get dynamic link from str 

            return <Link key={i} to={link}>{linkName}</Link>;
        }
        else {
            return <span key={i}>{str}</span>;
        }
    });

如何使用React Link组件替换字符串的一部分

2 个答案: