Блог

Главная - Вопросы по программированию - ReactJS: визуализация html из импортированной строки данных внутри .map

ReactJS: визуализация html из импортированной строки данных внутри .map

#javascript #reactjs

#javascript #reactjs

Вопрос:

Новое в ReactJS. Я сопоставляю массив данных, некоторые из которых являются строками с HTML-тегами. Я пытаюсь выяснить, как визуализировать html, чтобы он был функциональным HTML. В настоящее время он выводится в браузере в виде строки.

Данные:

 const PROJECTS = [
  {
    id: 1,
    title: 'Website',
    dates: 'December 2015 - December 2017',
    description: 'Did some freelance work for <a href="www.website.com">website.com</a>.',
  },
  {
    id: 2,
    title: 'Website',
    dates: 'December 2015 - December 2017',
    description: 'Did some freelance work for <a href="www.website.com">website.com</a>.',
  }
];

export default PROJECTS;

Компонент React

 import React, { Component } from 'react';
import PROJECTS from '../data/projects';

class Projects extends Component {
  render() {
    return (
      
          <div>
            {PROJECTS.map(PROJECT => {
              return(
                <article key={PROJECT.id}>
                  <h2>{PROJECT.title}</h2>
                  <p>{PROJECT.dates}</p>
                  <p>{PROJECT.description}</p>
                </article>
              )
            })}
          </div>

    )
  }
}

export default Projects;

Комментарии:

1. Я думаю, вы ищете reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

Ответ №1:

Измените свой Projects так, чтобы HTML состоял из JSX вместо этого:

 import React from 'react';
const PROJECTS = [
  {
    id: 1,
    title: 'Website',
    dates: 'December 2015 - December 2017',
    description: <>Did some freelance work for <a href="www.website.com">website.com</a>.</>,
  },
  {
    id: 2,
    title: 'Website',
    dates: 'December 2015 - December 2017',
    description: <>Did some freelance work for <a href="www.website.com">website.com</a>.</>,
  }
];

Они, <p>{PROJECT.description}</p> которые у вас уже есть, будут отображать JSX.

(Вам нужно импортировать React, даже если вы не создаете компонент — поскольку для этого требуется JSX, а для JSX требуется React.createElement, требуется импорт React)

Комментарии:

1. Спасибо за быструю помощь. Все это были отличные ответы, однако я выбрал ваш, поскольку у меня есть контроль над этим конкретным файлом данных.

Ответ №2:

Есть поддержка для видимого тега html: dangerouslySetInnerHTML

Пример:

 const PROJECTS = [
    {
        id: 1,
        title: 'Website',
        dates: 'December 2015 - December 2017',
        description: 'Did some freelance work for <a href="www.website.com">website.com</a>.'
    },
    {
        id: 2,
        title: 'Website',
        dates: 'December 20'  
            '15 - December 2017',
        description: 'Did some freelance work for <a href="www.website.com">website.com</a>.'
    }
];


class Projects extends Component {
    render() {
        return (

            <div>
                {PROJECTS.map(PROJECT => {
                    return(
                        <article key={PROJECT.id}>
                            <h2>{PROJECT.title}</h2>
                            <p>{PROJECT.dates}</p>
                            <p dangerouslySetInnerHTML={{ __html:PROJECT.description}}></p>
                        </article>
                    )
                })}
            </div>

        )
    }
}

Комментарии:

1. Спасибо, что показали мне, как использовать dangerouslySetInnerHTML. Я читал об этом раньше, но я часто спотыкаюсь о правильной реализации.

Ответ №3:

 Without using any third party library use `dangerouslySetInnerHTML` but you have to be sure you get valid html in the response everytime

return (
    <div>
        {PROJECTS.map(PROJECT => {
            return (
                <article key={PROJECT.id}>
                    <h2>{PROJECT.title}</h2>
                    <p>{PROJECT.dates}</p>
                    <p dangerouslySetInnerHTML={{ __html: PROJECT.description }}></p>
                </article>
            )
        })}
    </div>
)

Комментарии:

1. Спасибо, что показали мне, как использовать dangerouslySetInnerHTML. Я читал об этом раньше, но я часто спотыкаюсь о правильной реализации.

Ответ №4:

Одним из вариантов является использование библиотеки react-html-parserhttps://www.npmjs.com/package/react-html-parser чего можно избежать dangerouslySetInnerHTML . Это также означает, что вам не нужно было бы манипулировать своим массивом, если бы он поступал, например, непосредственно из API (но всегда рекомендуется его дезинфицировать в любом случае).

Обновленный код будет выглядеть следующим образом:

 import React, { Component } from 'react';
import PROJECTS from '../data/projects';
import ReactHtmlParser from 'react-html-parser';

class Projects extends Component {
  render() {
    return (
      
          <div>
            {PROJECTS.map(PROJECT => {
              return(
                <article key={PROJECT.id}>
                  <h2>{PROJECT.title}</h2>
                  <p>{PROJECT.dates}</p>
                  <p>{ReactHtmlParser(PROJECT.description)}</p>
                </article>
              )
            })}
          </div>

    )
  }
}

export default Projects;