时间戳

首页 > 解决方案 > 无法在 React 中渲染包含“”的变量

reactjs - 无法在 React 中渲染包含“”的变量

问题描述

我正在尝试将变量图标呈现到反应组件中 - 请参见下面的代码

render() {    

    const elementsRender = this.state.elements.map(elements => {
      // Formating variables
      const folderBorder = (elements.type === "folder") ? " folder-border" :"";


      const icon = "<i className="material-icons">folder </i>"


      const text =`<h1>A heading</h1>`
      console.log(icon)

      const addIcon = (elements.type === "folder") ? icon : "not a folder";


      return <li key={elements.index}>

        <div className={"infobox-parent"+ folderBorder}>
          <div className={elements.type +" "+elements.level}>

          {elements.type === "folder" ? icon : "folder" }

            <span>{elements.element}</span></div>
          <div className={elements.type}>{elements.description}{text}</div>
        </div>
      </li>;
    });
    return (
      <div id="COMPONENT-ReactFolderStructure">
        <h1>REACT Folder Structure</h1>
        <i class="material-icons">
            folder
        </i>
        <ul>{elementsRender}</ul>
      </div>
    );
  }
}

当我运行它时，HTML 以文本形式出现，当我查看检查器时，我看到 HTML 被“”包围。我认为 int 是由于 "" 将其转义，但我不知道如何修复它。

标签： reactjsiconsescaping

解决方案

您需要删除"并呈现实际上是 JSX (React.Component) 的“HTML”

改变这个：

const text =`<h1>A heading</h1>`
...
const icon = "<i className="material-icons">folder </i>"

至：

const text = <h1>A heading</h1> 
...
const icon = <i className="material-icons">folder </i>

推荐阅读