如何将带有文本和链接的变量传递到 React 元素

Question

如果我有一个像这样的 React 组件：

return (
  <p>{obj.text}</p>
)

我传递这样的硬编码值：

obj = {
  text: 'This is an example string. I would like a [link here].'
}

我唯一可以使用 dangerouslySetInnerHtml 并传入 HTML 吗？

虽然在这种特殊情况下这可能没有害处，但随着时间的推移，我可以看到开发人员在

obj.text

中引入变量的可能性，然后用户突然能够输入恶意代码。

有更简洁的解决方案吗？

Answer 1

如果您想将某些内容设置为 HTML，那么危险的SetInnerHtml 就是实现这一点的方法。如果您使用的 HTML 不是您可以完全控制的内容，而是类似于用户输入的内容，那么您应该始终解析它以确保它不是恶意的。

如果您想创建超链接，那么另一种可能性是使用一个构建元素并返回该元素的函数。例如：

obj = {
  text: 'This is an example string.',
  link: 'www.TastyPotatoes.com'
}

你的渲染函数可能是这样的：

buildLink() {
   return(
      <p>
        {obj.text}. <a href={obj.link}>This is a link</a>
      </p>
    );
}

render() {
   return (this.buildLink());
}

这样您就不会使用危险的SetInnerHtml。最后，如果您必须直接将某些内容设置为 HTML，请务必先解析它以确保其安全。

Answer 2

如果您想专门为这个用例创建一个组件，那么@Jayce444 建议的就是正确的方法。

但是如果您想要更通用的方法，那么您可以选择像 React Linkyfy 这样的库（https://github.com/tasti/react-linkify/）。

我在我的一个项目中使用了它，它对我来说非常有效。

这是我正在使用的组件的更简单形式。

import React, {PropTypes} from 'react';
import Linkify from 'react-linkify';

export default class TextWithLink extends React.Component {
    constructor(props) {
      super(props);
    }

    render() {
      let text = this.props.text;
      if(this.props.showLink) {
        text = <Linkify properties={{target: '_blank', rel: "nofollow   noopener"}}>{text}</Linkify>
      }
      return (<div>{text}</div>);
    }
}