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? 4 сен 2020 в 13:30
  • Нужно было отрендерить DOM, вопрос решил с помощью свойства dangerouslySetInnerHTML. Спасибо за комментарий! 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. 5 сен 2020 в 3:42
0

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

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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