Невозможно отобразить переменную, содержащую "в React - PullRequest
Новая
       14

Невозможно отобразить переменную, содержащую "в React

0 голосов
/ 31 октября 2019

Я пытаюсь отобразить значок переменной в компоненте реакции - см. Код ниже 

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 из-за "" выхода из него, но я не знаю, как это исправить.

1 Ответ

2 голосов
/ 31 октября 2019

Вам необходимо удалить " и отобразить «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>
...