如何扩展ReactJS的Link组件并渲染innerHTML内容

我明白你想通过扩展React Router的Link组件来直接渲染HTML内容的需求，确实大部分资料都是围绕事件扩展，针对innerHTML的场景比较少。先帮你分析下当前代码的问题，再给出更合理的实现方式：

现有代码的问题 #

你当前用<span>{this.props.html}</span>的写法，React会把this.props.html当作普通文本转义渲染，并不会解析成实际的HTML元素，所以达不到你想要的效果。

正确的实现方式 #

React提供了dangerouslySetInnerHTML属性来处理直接插入HTML的场景，我们可以基于这个来改造你的LinkX组件：

类组件版本（贴近你的原有代码） #

// React packages
import React from 'react';
import { Link } from 'react-router-dom';

export default class LinkX extends React.Component {
  render() {
    // 解构出html属性，剩下的属性透传给Link组件
    const { html, ...restProps } = this.props;
    return (
      <Link {...restProps}>
        <span dangerouslySetInnerHTML={{ __html: html }} />
      </Link>
    );
  }
}

函数组件版本（更符合现代React写法） #

如果你的项目已经支持函数组件，推荐这种更简洁的写法：

import React from 'react';
import { Link } from 'react-router-dom';

const LinkX = ({ html, ...rest }) => {
  return (
    <Link {...rest}>
      <span dangerouslySetInnerHTML={{ __html: html }} />
    </Link>
  );
};

export default LinkX;

重要注意事项 #

• dangerouslySetInnerHTML命名里的"dangerously"是有原因的：如果html内容包含用户输入的未过滤内容，很容易引发XSS攻击。如果你的HTML内容来自用户输入，一定要先做严格的内容过滤和转义。
• 如果你只是需要渲染简单的文本内容，完全不需要用这个属性，直接传递文本作为Link的子元素即可，只有当确实需要插入HTML结构时才使用。

内容的提问来源于stack exchange，提问作者Miro J.