React 30 秒速学：制做自动识别连接的文本组件

本文译自：30-seconds-of-react。React 30 秒速学：全篇中文翻译、学习，地址：30-seconds-of-react-zh_CN-umi，全部案例进行分析、注释、上线。

系列文章：

• React 30 秒速学：把数组数据渲染为列表、表格
• React 30 秒速学：制做输入框、密码可见、滑块组件、下拉选择器、复选框组件
• React 30 秒速学：制做多行文本组件，限制字符数和单词数
• React 30 秒速学： 实现可折叠、无限层级的树形组件
• React 30 秒速学：制做自动识别连接的文本组件
• React 30 秒速学：制做手风琴组件
• React 30 秒速学：制做轮播组件
• React 30 秒速学：制做折叠面板组件
• React 30 秒速学：制做倒计时组件
• React 30 秒速学：制做文件拖放组件
• React 30 秒速学：制做模态框组件
• React 30 秒速学：制做星级评分组件
• React 30 秒速学：制做选项卡组件

AutoLink自动识别文本中的连接

将字符串中的URL转换为适当的 <a> 元素。

• 使用正则表达式配合 String.prototype.split() 和 String.prototype.match()来查找字符串中的URL。
• 返回一个<React.Fragment>不产生多余的元素；其匹配的URL呈现为<a>元素，必要时须要处理丢失的协议前缀补充为http://，并将其他字符串呈现为明文。

import React from "react";
function AutoLink({ text }) {
  // 用于找 url 的正则表达式
  const delimiter = /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\-]{1,61}[a-z0-9])?\.[^\.|\s])+[a-z\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\/~#&=;%+?\-\\(\\)]*)/gi;

  return (
    <React.Fragment> {/* 按正则分割为数组，最终渲染时被显示在了一块儿 */} {text.split(delimiter).map(word => { // foo bar baz // http://example.org // bar console.log(word); // 从以上分割的内容中找到具体的url的部分 // 进行超连接的处理 let match = word.match(delimiter); if (match) { let url = match[0]; return ( <a href={url.startsWith("http") ? url : `http://${url}`} key={url} target="_blank">{url}</a> ); } return word; })} </React.Fragment> ); } 复制代码

例子

export default function() {
  return <AutoLink text="foo bar baz http://example.org barhttp://baidu.com 123" />; } 复制代码

• 示例代码
• 运行效果