Вот то, что я пробовал, и как не получается.

Это работает:

Hi there!" }} />

Это не так:


Свойство description представляет собой обычную строку содержимого HTML. Однако по какой-то причине он отображается как строка, а не как HTML.

enter image description here

Есть предложения?

Sergio Tapia

Ответов: 13

Ответы (13)

Проверьте, не экранирован ли текст, который вы пытаетесь добавить к узлу, следующим образом:

var prop = {
    match: {
        description: '<h1>Hi there!</h1>'
    }
};

Вместо этого:

var prop = {
    match: {
        description: '

Hi there!

' } };

если экранирован, вы должны преобразовать его со стороны сервера.

The node is text because is escaped

Узел является текстовым, потому что он экранирован

The node is a dom node because isn't escaped

Узел является внутренним узлом, потому что не экранирован

Если у вас есть контроль над {this.props.match.description} и если вы используете JSX. Я бы рекомендовал не использовать "опасноSetInnerHTML".

// In JSX, you can define a html object rather than a string to contain raw HTML
let description = 

Hi there!

; // Here is how you print return ( {description} );

Я использую innerHTML вместе со ссылкой на span:

import React, { useRef, useEffect, useState } from 'react';

export default function Sample() {
  const spanRef = useRef(null);
  const [someHTML,] = useState("some bold");

  useEffect(() => {
    if (spanRef.current) {
      spanRef.current.innerHTML = someHTML;
    }
  }, [spanRef.current, someHTML]);

  return 
my custom text follows
}

ОБНОВЛЕНИЕ:

Я удалил некоторые состояния HTML и добавил комментарии, чтобы пример более соответствовал концепции.

/**
 * example how to retrieve a reference to an html object
 */

import React, { useRef, useEffect } from 'react';

/**
 * this component can be used into another for example 
 */
export default function Sample() {
    /**
     * 1) spanRef is now a React.RefObject
     * initially created with null value
     */
    const spanRef = useRef(null);

    /**
     * 2) later, when spanRef changes because html span element with ref attribute,
     * follow useEffect hook will triggered because of dependent [spanRef].
     * in an if ( spanRef.current ) that states if spanRef assigned to valid html obj
     * we do what we need : in this case through current.innerHTML
     */
    useEffect(() => {
        if (spanRef.current) {
            spanRef.current.innerHTML = "some bold";
        }
    }, [spanRef]);

    return 
my custom text follows
{/* ref={spanRef] will update the React.RefObject `spanRef` when html obj ready */}
}

 // Для машинописного текста

импорт синтаксического анализа, {HTMLReactParserOptions} из "html-response-parser";
импортировать {Element} из "domhandler / lib / node";

функция экспорта contentHandler (postContent: string) {
  Параметры const: HTMLReactParserOptions = {
    replace: (domNode: Element) => {
      if (domNode.attribs) {
        if (domNode.attribs.id === 'shortcode') {
          return 
Шорткод
; } } }, }; возвратный синтаксический анализ (postContent, параметры); } // Использование: contentHandler (" Hello World! ")

Является ли this.props.match.description строкой или объектом? Если это строка, ее следует преобразовать в HTML. Пример:

class App extends React.Component {

constructor() {
    super();
    this.state = {
      description: '

something

' } } render() { return (
); } } ReactDOM.render(, document.getElementById('root'));

Результат: http://codepen.io/ilanus/pen/QKgoLA?editors=1011

Однако, если описание имеет вид

что-то

без кавычек '', вы получите:

​Object {
$$typeof: [object Symbol] {},
  _owner: null,
  key: null,
  props: Object {
    children: "something",
    style: "color:red;"
  },
  ref: null,
  type: "h1"
}

Если это строка, и вы не видите разметки HTML, единственная проблема, которую я вижу, это неправильная разметка ..

ОБНОВЛЕНИЕ

Если вы имеете дело с HTML-объектами, вам необходимо декодировать их, прежде чем отправлять их в опасноSetInnerHTML, поэтому он называется «опасно»:)

Рабочий пример:

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      description: '<p><strong>Our Opportunity:</strong></p>'
    }
  }

   htmlDecode(input){
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
  }

  render() {
    return (
      
); } } ReactDOM.render(, document.getElementById('root'));

Если у вас есть HTML в строке, я бы рекомендовал использовать пакет под названием html-response-parser.

Установите его: npm install html-react-parser или, если вы используете yarn, yarn add html-react-parser

Используйте это примерно так

import parse from 'html-react-parser'
const yourHtmlString = '

Hello

'
{синтаксический анализ (yourHtmlString)}

Ссылка: https://www.npmjs.com/package/html-react-parser

Я использую response-html-parser

yarn add react-html-parser
import ReactHtmlParser from 'react-html-parser'; 

{ ReactHtmlParser (html_string) }

Источник на npmjs.com

Поднятие комментария @ okram для большей наглядности:

from its github description: Converts HTML strings directly into React components avoiding the need to use dangerouslySetInnerHTML from npmjs.com A utility for converting HTML strings into React components. Avoids the use of dangerouslySetInnerHTML and converts standard HTML elements, attributes and inline styles into their React equivalents.

Если у вас есть контроль над тем, откуда берется строка, содержащая html (т. Е. Где-то в вашем приложении), вы можете воспользоваться новым API, сделав что-то вроде:

import React, {Fragment} from 'react'

const stringsSomeWithHtml = {
  testOne: (
    
      Some text wrapped with strong
    
  ),
  testTwo: `This is just a plain string, but it'll print fine too`,
}

...

render() {
  return 
{stringsSomeWithHtml[prop.key]}
}

Мне не удалось заставить npm build работать с response-html-parser. Однако в моем случае мне удалось успешно использовать https://reactjs.org/docs/fragments.html. У меня было требование показать несколько символов юникода html, но они не должны быть напрямую встроены в JSX. В JSX его нужно было выбрать из состояния компонента. Фрагмент кода компонента приведен ниже:

constructor() 
{
this.state = {
      rankMap : {"5" : ★ ★ ★ ★ ★ , 
                 "4" : ★ ★ ★ ★ ☆, 
                 "3" : ★ ★ ★ ☆ ☆ , 
                 "2" : ★ ★ ☆ ☆ ☆, 
                 "1" : ★ ☆ ☆ ☆ ☆}
                };
}

render() 
{
       return ();
}

В моем случае я использовал response-render-html

Сначала установите пакет, набрав npm i --save response-render-html

затем

import renderHTML from 'react-render-html';

renderHTML("GitHub")

Вы просто используете опасный метод ReactSetInnerHTML

Или вы можете реализовать больше этим простым способом: Визуализировать необработанный HTML-код в приложении React

я использую https://www.npmjs.com/package/html-to-react

const HtmlToReactParser = require('html-to-react').Parser;
let htmlInput = html.template;
let htmlToReactParser = new HtmlToReactParser();
let reactElement = htmlToReactParser.parse(htmlInput); 
return(
{reactElement}
)

Вы также можете использовать parseReactHTMLComponent из Jumper Package. Вы только посмотрите, это просто, и вам не нужно использовать синтаксис JSX.

https://codesandbox.io/s/jumper-module-react-simple-parser-3b8c9?file=/ src / App.js.

Подробнее о перемычке:

https://github.com/Grano22/jumper/blob/master/components.js

Пакет NPM:

https://www.npmjs.com/package/jumper_react

2022 WebDevInsider