如何在 dangerouslySetInnerHTML 中使用 <Link /> 组件

Question

目前我的一个组件中有这个：

{someObject.map(obj => (
    <div
        dangerouslySetInnerHTML={{
            __html: obj.text
        }}
    />
))}

基本上，我正在映射另一个文件上的 someObject。结构是这样的：

export default someObject = [
      {
         obj: "<p>Some text 1.</p>"
      },
      {
         obj: "<p>Some text 2.</p>"
      }
    ]

我只是为了演示而简化了内容。但是，我运行遇到了问题，因为我需要在其中一个项目中使用 <Link /> 组件。如：

export default someObject = [
    {
        obj: "<p>Some text 1.</p>"
    },
    {
        obj: "<p>Some text 2.</p>"
    },
    {
        obj: "<p>Some text 2 and <Link to="/someroute">link</Link>.</p>"
    }
]

但是，它不起作用，因为整个 <p></p> 标记都包含在 dangerouslySetInnerHTML.

中

我可以只对 link 使用普通的 <a></a> 标记，但这似乎不是一个好的解决方案，因为整个应用程序将重新加载，而不是仅仅转到另一条路线。

还有哪些其他选项可以实现此功能？

Answer 1

export default someObject = [
    {
        obj: "<p>Some text 1.</p>"
    },
    {
        obj: "<p>Some text 2.</p>"
    },
    {
        obj: linkto('/someroute')
    }
]

linkto 将解决您的问题。

Answer 2

There's is two ways to solve this problem :

第一种方法：

这就像一种更通用的方法，您可以使用它来选择您的代码。尝试使用这个库 (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>);
    }
}

第二种方式：

万一，如果你想创建一个超链接（<a>），你应该有一个构建元素和returns结果的函数。

示例：

list = {
  text: 'hello world',
  link: 'www.facebook.com'
}

渲染函数可能是这样的：

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

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

Answer 3

为什么不直接将对象导出为 jsx 对象？我认为使用 dangerouslySetInnerHTML 是一种不好的做法，它可能会导致 XSS 攻击。

const someObject = [
  {
    obj: <p>Some text 1.</p>
  },
  {
    obj: <p>Some text 2.<a href="https://google.com">google</a></p>
  }
]
class App extends React.Component {
  render(){ 
    return (
    <div className="App">
      <h1>Hello world</h1>
      <h2>Jsx object goes here {someObject[1].obj}</h2>
    </div>
  )};
}

const rootElement = document.getElementById("container");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

如何在 dangerouslySetInnerHTML 中使用 <Link /> 组件

How to use <Link /> component inside dangerouslySetInnerHTML

javascript

reactjs

react-router

react-router-dom

第一种方法：

第二种方式：