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

Question

我是 React 的新手我有这个疑问。我想渲染 li 的列表元素到ul 。我正在循环并渲染到 UI。 一切都按预期顺利运行。

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

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

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

编辑::

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

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

注意:我从一个教程网站获得了代码引用，并学习了如何循环元素

Answer 1

我认为您只是希望第三个数组元素是 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 时它将被放在引号之间。