您需要將電話號碼替換為鏈接，然后用于dangerouslySetInnerHTML添加到 React 組件。
注意：dangerouslySetInnerHTML之所以調(diào)用它，是因?yàn)槟菀资艿絹碜杂脩羯蓛?nèi)容的 XSS 攻擊。您應(yīng)該先對琴弦進(jìn)行消毒。
const Linkify = ({ text, pattern, formatter }) => {
const __html = text.replace(pattern, formatter);
return <div dangerouslySetInnerHTML={{ __html }} />;
};
const text = 'This is my phone number - 1234567890';
const pattern = /\d+/g;
const formatter = str => `<a href="#${str}">${str}</a>`;
ReactDOM.render(
<Linkify text={text} pattern={pattern} formatter={formatter} />,
root
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
不使用dangerouslySetInnerHTML主要問題是將字符串分解為鏈接/非鏈接字符串。這可以通過使用此答案中的代碼來完成。我更新了代碼以將字符串標(biāo)記為匹配項(xiàng)，因此您可以相應(yīng)地設(shè)置它們的格式。
const Linkify = ({ text, pattern, formatter }) => {
const arr = getSegments(pattern, text);
return arr.map(formatter);
};
const text = 'This is my phone number - 1234567890, and his is 34234123142';
const pattern = /\d+/g;
const formatter = ({ text, match }) => match ? <a href={`#${text}`}>{text}</a> : text;
ReactDOM.render(
<Linkify text={text} pattern={pattern} formatter={formatter} />,
root
);
function getSegments(rex, str) {
const segments = [];
let lastIndex = 0;
let match;
rex.lastIndex = 0; // In case there's a dangling previous search
while (match = rex.exec(str)) {
if (match.index > lastIndex) {
segments.push({ text: str.substring(lastIndex, match.index) });
}
segments.push({ text: match[0], match: true });
lastIndex = match.index + match[0].length;
}
if (lastIndex < str.length) {
segments.push({ text: str.substring(lastIndex) });
}
return segments;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
