javascript - 在 React.js 中将字符串渲染为 JSX

Question

改变这个

"<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 中显示为字符串

Answer 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 答案参考 - [如何将字符串转换为 jsx？]

Answer 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