0

У меня есть многолетний проект, созданный на Joomla. Используя REST API Джумлы получил JSON из базы данных MySQL. Задача - обновить сайт и сделать его на Next, параллельно попрактиковаться. Столкнулся с проблемой - при вставке тела статьи в компонент, в браузере отображаются все теги. Перечитал множество форумов, но как решить вопрос на Реакт, так и не нашел.

Ссылка на пример получаемого JSON: https://sketchok.com/api/v1/content/item/1902

Ниже привел код компонента

Буду очень признателен за подсказку!

export default class Article extends React.Component {
  state = {
    title: null,
    body: null,
  };

  componentDidMount() {
    fetch("https://sketchok.com/api/v1/content/item/1902")
      .then((res) => res.json())
      .then((data) => {
        this.setState({
          title: data.article.title,
          body: data.article.fulltext
        });
      });
  }

  render() {
    return (
      <Layout>
        <h1>{this.state.title}</h1>
        <div>{this.state.body}</div>
        <Link href="/">
          <a>Home</a>
        </Link>
        <p>Text</p>
      </Layout>
    );
  }
}
2
  • Надо выпилить теги или отрендерить в DOM? Commented 4 сент. 2020 в 13:30
  • Нужно было отрендерить DOM, вопрос решил с помощью свойства dangerouslySetInnerHTML. Спасибо за комментарий! Commented 5 сент. 2020 в 14:44

3 ответа 3

1

Текст как HTML в реакте можно вставить при помощи "dangerouslySetInnerHTML"

В вашем случае код будет выглядеть примерно так:

export default class Article extends React.Component {
  state = {
    title: null,
    body: null,
  };

  componentDidMount() {
    fetch("https://sketchok.com/api/v1/content/item/1902")
      .then((res) => res.json())
      .then((data) => {
        this.setState({
          title: data.article.title,
          body: data.article.fulltext
        });
      });
  }

  render() {
  const {title, body} = this.state;
  const regex = /(<([^>]+)>)/ig;
  
  const formattedTitle = title.replace(regex, ''),
        formattedBody = body.replace(regex, '');
  
    return (
      <Layout>
        <h1 dangerouslySetInnerHTML={{__html:formattedTitle}} />
        <div dangerouslySetInnerHTML={{__html:formattedBody}} />
        <Link href="/">
          <a>Home</a>
        </Link>
        <p>Text</p>
      </Layout>
    );
  }
}

1
  • 1
    Спасибо! Именно то, что нужно было. Теперь все отображается корректно! Единственное, в моем случае не понадобилось исключать Regular expressions. Commented 5 сент. 2020 в 3:42
0

Можно решить это с помощью регулярного выражения и код будет выглядеть так

const regex = /(<([^>]+)>)/ig
const result = data.description.replace(regex, '')

3
  • Спасибо за ответ! В этом случае содержимое отображается как текст. Задача в том, чтобы теги несли свой функционал. То есть, нужно получить не просто текст, а чтобы содержимое отображалось, как форматированный HTML блок. Commented 4 сент. 2020 в 13:32
  • тогда я не совсем понимаю суть вопроса, ты можешь просто отстилизовать получаемые теги так как тебе нужно, не вижу проблемы Commented 4 сент. 2020 в 14:07
  • Я видимо не совсем точно описал проблему. Дело в том, что при вставке данных с html тегами из json в реакт, все отображается в одной куче - теги, текст, ссылки на картинки, вместо самих изображений и т.д. Мне нужно было не избавиться от тегов, а чтобы они учитывались браузером и выполняли свой функционал. Решением оказалось свойство dangerouslySetInnerHTML. Еще раз спасибо за ответ, решение с регулярными выражениями пригодилось в другом вопросе :) Commented 5 сент. 2020 в 3:48
0

HTML в реакте можно вставить при помощи "dangerouslySetInnerHTML".

При этом есть опасность XSS атаки.

Для защиты можно использовать библиотеку: https://github.com/cure53/DOMPurify

function RawHTML({dirtyHTML}) {
  const cleanHTML = DOMPurify.sanitize(dirtyHTML)
  return <div dangerouslySetInnerHTML={{__html: cleanHTML}} />;
}
1
  • Спасибо за ответ! Уже в процессе установки этой библиотеки. dangerouslySetInnerHTML оказался искомым решением Commented 5 сент. 2020 в 3:43

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.