清理HTML字符串而不使用dangerouslySetInnerHTML进行长度检查

Question

我可以在React JSX中使用dangerouslySetInnerHTML来清理字符串吗？要求是检查已清理的html字符串的长度,然后仅包括该组件.就像是

    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>
      )
    }
})

一切正常,但失败了this.props.htmlString='&nbsp'.在这种情况下,长度> 0并且包括组件.所以我想在元素包含本身之前检查innerHTML的长度.

我遇到的一个可能的解决方案是:

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

但我正在寻找更清洁的反应类型.

Answer 1

正如您已经建议的，通过用 HTML 字符串填充 DOM 元素，可以轻松地将 HTML 字符串解析为纯文本。

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

这会将您的标记转换为纯文本：

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

检查解析的文本是否不为空就很简单了：

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

没有“React 方式”可以做到这一点，因为如果您直接从字符串设置 HTML，则只有在实际注入 DOM 时才会解析。当然，您可以使用此工具来创建HOC：

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

用法：

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