Question

我从服务器上获取了一个HTML模板，我想将此HTML作为道具传递给组件，然后用自己拥有的一些动态数据替换模板中某些部分的文本。我不需要我看到了很多帖子都在使用ReactingSetInnerHtml在React中渲染HTML内容，但是我发现这没有帮助。现在我来自服务器的响应看起来像这样。我对如何从客户端使用此HTML模板感到困惑。

{template:<html><title><table><tbody><tr>
<td style="overflow-wrap: break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
</td></tr><tr><td style="overflow-wrap: break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
</td></tr><tr><td style="overflow-wrap: break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
</td></tr></tbody></table></title> </html>,
templateId : `1`}

Answer 1

使用lib react-render-html呈现html字符串

import renderHTML from 'react-render-html';
let App = React.createClass({
  render() {
    return (
      <div className='app'>
        {renderHTML("<a class='github' href='https://github.com'><b>GitHub</b></a>")}
      </div>
    );
  }
});

Answer 2

我通常将此作为数据属性传递，然后在我的js代码中使用它

您可以做这样的事情，我正在写一个h1标签，但是您可以使用任何标签

<h1 id="template-data" data-testing="your html code"></h1>

然后我要像这样在文件末尾链接到js文件

<script src="index.js"></script>

现在在index.js文件（jquery）中

$('template-data').data('testing')

或普通js

let templateData = document.getElementById('template-data')
templateData.getAttribute('data-testing')

如何从服务器使用HTML模板作为组件的道具？

2 个答案: