javascript - React和普通HTML中的HTML或脚本解释

我是React的新手，对此我有疑问。我想将li元素列表呈现给ul。我正在执行循环并渲染到UI。一切都按预期进行。

但是我怀疑是在渲染元素时，如果元素是<b>sampletext</b>，则它是按原样渲染的。我想知道为什么浏览器不解释这些元素并且为什么不将其显示为粗体文本（如sampletext）。

我试图在普通的html和js中添加具有相同文本<b>sampletext</b>的动态元素，但是它被解释为sampletext并显示为粗体文本。

任何人都可以在渲染时不解释元素中的标签的情况下帮助我应对React如何处理文本元素？提前致谢。

编辑::

render: function() {
    var arr = ['sampletext1', 'sampletext2', '<b>sampletext3</b>'];
    var arrElements = arr.map(function(elem){
                    return <li>{elem}</li>;
                  })

    return  <ul>{ arrElements }</ul>
}

注意：我从一个教程网站上获得了代码参考，并学习了有关循环元素的知识

最佳答案

我认为您只希望第三个数组元素是JSX元素而不是字符串：

 var arr = ['sampletext1', 'sampletext2', <b>sampletext3</b>];

编辑：

为了说明为什么会出现这种情况，请在下面查看如何将JSX编译为JavaScript的示例函数以及每种情况的区别。

JSX：

function bAsJsxElement() {
  return <li><b>sampletext3</b></li>;
}

function bAsString() {
  return <li>{'<b>sampletext3</b>'}</li>;
}

编译的JavaScript：

function bAsJsxElement() {
  return React.createElement(
    'li',
    null,
    React.createElement(
      'b',
      null,
      'sampletext3'
    )
  );
}

function bAsString() {
  return React.createElement(
    'li',
    null,
    '<b>sampletext3</b>'
  );
}

如果传递给React.CreateElement的第三个参数是字符串，则在呈现为HTML时将放在引号之间。

sampleText

javascript - React和普通HTML中的HTML或脚本解释