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 = "&nbsp;";
var div = document.createElement('div');
div.innerHTML = html; //check the length of innerHTML now

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

Answer 1

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

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

这会将您的标记变成明文：

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

检查已解决的文本是否为空是非常简单的：

htmlToText('&nbsp;').trim().length === 0
htmlToText('&nbsp; FOO ').trim().length === 3

没有＆＃34;反应方式＆＃34;要做到这一点，因为如果您直接从字符串设置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} />);

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

1 个答案: