在 React.js 中将字符串呈现为 JSX [重复]答案

【问题标题】：Render string as JSX in React.js [duplicate]在 React.js 中将字符串呈现为 JSX [重复]
【发布时间】：2019-02-06 09:37:41
【问题描述】：

改变这个

"<img class="emojione" alt="????????" title=":flag_gb:"
src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f1ec-1f1e7.png"/>"

到

<img class="emojione" alt="????????" title=":flag_gb:"
src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f1ec-1f1e7.png"/>

我在 reactjs 项目中使用 emojione，想在 JSX 中使用，比如

<div>
    <img class="emojione" alt="????????" title=":flag_gb:"
    src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f1ec-1f1e7.png"/>
</div>

目前在html中显示为字符串

【问题讨论】：

不，情况不同
@avinash 为什么？您想删除开头和结尾的双引号，这就是链接问题的全部内容。
@CodeF0x，显示在 html
@avinash 对不起，我不明白你的问题。您可以编辑您的问题并提供更多详细信息吗？
@CodeF0x 我已经添加了一些信息，请检查

标签： javascript reactjs emojione

【解决方案1】：

我假设您最初的问题是该值被呈现为字符串而不是 React 中的元素

可以使用JSX属性dangerouslySetInnerHTML

例子：

render() {
   str = '<img class="emojione" alt="??" title=":flag_gb:" src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f1ec-1f1e7.png"/>'
   return( <div dangerouslySetInnerHTML={{__html: str}}></div> )
}

原始 SO 答案参考 - [How do I convert a string to jsx?]

【讨论】：

谢谢，它正在使用危险的SetInnerHTML

【解决方案2】：

如果要在 JS 中删除字符串开头和结尾的某些字符，可以使用以下示例中的 trim2() 函数：

<script>
function trim2(str, chr) {
  var rgxtrim = (!chr) ? new RegExp('^\\s+|\\s+$', 'g') : new RegExp('^'+chr+'+|'+chr+'+$', 'g');
  return str.replace(rgxtrim, '');
}

var str ='"<img class="emojione" alt="????" title=":flag_gb:"src="https://cdn.jsdelivr.net/emojione/assets/4.0/png/32/1f1ec-1f1e7.png"/>"';

let s2 = trim2(str, '"');
alert(s2);
</script>

来源：https://coursesweb.net/javascript/trim-rtrim-ltrim-javascript_cs

【讨论】：

即使去掉了前导引号，也不会将字符串转换成JSX，也没有解决原来的问题。