Question

我正在尝试将变量图标渲染到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是由于“”转义了出来，但我不知道如何解决它。

Answer 1

您需要删除"并呈现“ HTML”，实际上是JSX（React.Component）

更改此：

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>

无法在React中呈现包含“

1 个答案: