Sanitizza stringa HTML senza utilizzare pericolosamenteSetInnerHTML per il controllo della lunghezza

Question

È possibile disinfettare la stringa senza utilizzare pericolosamenteSetInnerHTML in React JSX. Il requisito è controllare la lunghezza della stringa html disinfettata e quindi includere solo il componente. Qualcosa come

var SomeComponent = React.createClass({ 
     render:function(){ 
     return (
      {this.props.htmlString.length > 0 ? <Child htmlString={this.props.htmlString} : null} 
     ) 
     } 
    }) 

var Child = React.createClass({ 
    render:function(){ 
     return (
     <p dangerouslySetInnerHTML={{__html: this.props.htmlString}}></p> 
    ) 
    } 
}) 

Tutto funziona correttamente ma non riesce quando this.props.htmlString='&nbsp'. In questo caso, la lunghezza> 0 e il componente vengono inclusi. Quindi voglio controllare la lunghezza di innerHTML prima dell'inserimento dell'elemento stesso.

Una possibile soluzione mi sono imbattuto è qualcosa di simile:

var html = " "; 
var div = document.createElement('div'); 
div.innerHTML = html; //check the length of innerHTML now 

Ma Cerco un pulitore un altro tipo di reagire.

Answer 1

Come già suggerito, la risoluzione di una stringa HTML in testo semplice viene eseguita facilmente inserendo un elemento DOM.

function htmlToText(htmlString) { 
    const el = document.createElement('div'); 
    el.innerHTML = htmlString; 
    return el.textContent; 
} 

Questo trasforma il vostro codice in chiaro:

htmlToText(' ') === '\xa0' // non-breaking space character 

controllando che il testo risolto non è vuota è quindi banale:

htmlToText(' ').trim().length === 0 
htmlToText('  FOO ').trim().length === 3 

---

Non c'è "Reagire modo" per fare questo, perché se stai impostando l'HTML direttamente dalla stringa, viene risolto solo quando viene effettivamente inserito nel DOM. Naturalmente è possibile utilizzare questo strumento per creare un HOC:

const nonEmptyHtml = Component => props => { 
    const html = props.dangerouslySetInnerHTML; 
    if (html && !htmlToText(html).trim().length) { 
    return null; 
    } 
    return <Component {...props} />; 
}; 

Usage:

const NonEmptyParagraph = nonEmptyHtml('p'); 
ReactDOM.render(<NonEmptyParagraph dangerouslySetInnerHTML={htmlString} />);