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

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 。

我可以使用简单的<a></a>标记作为链接，但这似乎不是一个好的解决方案，因为整个应用程序将重新加载而不是仅仅转到另一个路由。

使这项工作的其他选择是什么？

Answer 1

为什么不直接将对象导出为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> 

Answer 2

• 有两种方法可以解决这个问题：

第一种方式：

它就像一种更通用的方法，您可以使用它来选择代码。 尝试使用此库（ 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> ），你应该有一个构建元素并返回结果的函数。

示例：

 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

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

linkto将解决您的问题。