如何在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.

我可以只使用普通<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>