React js渲染从服务器返回的html字符串[重复]答案

【问题标题】：React js render html string returned from server [duplicate]React js渲染从服务器返回的html字符串[重复]
【发布时间】：2017-08-03 10:58:46
【问题描述】：

从 php 我返回这个 html

PHP

$str = "Hello World";
echo json_encode("returnval"=>format_string($str));

function format_string($str){
  return "<b>".$str."</b>";
}

反应 JSX

render () => {
   //returnval = html string returned from php

   return (
     <div>
         {returnval} 
         <div>
              <span>Some data</span>
         </div>
     </div>
   );
}

上面将<b>Hello World</b>打印为文本。

但我希望 执行 html 标签（在本例中为粗体）

由于某些原因，我无法在 jsx 中编写 format_string 函数，有什么办法可以解决这个问题吗？

【问题讨论】：

你有什么错误吗？
@DeividasKaržinauskas 没有错误.. 我只想将 html 打印为 html 而不是文本

标签： javascript php html reactjs ecmascript-6

【解决方案1】：

由于某些原因，我无法在 jsx 中编写 format_string 函数，有什么办法可以解决这个问题吗？

是的，您实际上可以，但我认为您不确定如何；）

只需创建一个辅助函数，该函数将返回 b 标记内的文本 - 如果定义了内容。

class MyComponent extends Component {
  ...
  render() {
    {renderContent(content)}
    ...
  }
}

const renderContent = (content) =>
  content && <b>{contnet}</b>

【讨论】：

是的，我知道我可以大声笑.. 但实际上我的format_string 是一个非常复杂的函数（也使用了很多依赖项）。这只是一个例子。显然我可以用 javascript 编写它，但我想要一个快速的解决方案。还是谢谢
嗯，简短而合理的答案是不要这样做。当您危险地将 HTML 注入 React 组件时，它无法由虚拟 DOM 处理，因此每次更改时，都必须替换而不是更新。您说您的 HTML 非常复杂，因此可以肯定地假设这样的“功能”是性能杀手。

【解决方案2】：

您可以使用 dangerouslySetInnerHTML 属性来呈现您的 html 字符串。

查看 React 文档 (https://facebook.github.io/react/docs/dom-elements.html) 了解更多详情。

【讨论】：

是的，它有效........