javascript - 在不使用 dangerouslySetInnerHTML 进行长度检查的情况下清理 HTML 字符串

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=' ' 时失败。在这种情况下，长度 > 0 并且包含组件。所以我想在元素包含本身之前检查 innerHTML 的长度。

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

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

但我正在寻找一种更清洁的 react 类型。

Answer 1

正如您已经建议的那样，将 HTML 字符串解析为纯文本很容易，只需用它填充 DOM 元素即可。

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，它只会在实际注入(inject) 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} />);