My React component有一个suggestionRenderer属性,允许指定组件的呈现方式.例如:
<Autosuggest suggestions={getSuburbs} suggestionRenderer={renderLocation} />
function renderLocation(suggestion,input) { return ( <span><strong>{suggestion.slice(0,input.length)}</strong>{suggestion.slice(input.length)}</span> ); }
现在,我想写一个开玩笑测试,以确保suggestionRenderer完成它的工作.检查myElement.getDOMNode().innerHTML显示:
<span data-reactid=".9.1.$suggestion0.0"><strong data-reactid=".9.1.$suggestion0.0.0">M</strong><span data-reactid=".9.1.$suggestion0.0.1">ill Park</span></span>
这不是特别有用.
有没有办法获得干净的HTML,没有React属性?
您可以使用
原文链接:https://www.f2er.com/react/300651.htmlReact.renderToStaticMarkup
.
expect(React.renderToStaticMarkup( <Autosuggest ... suggestionRenderer{renderLocation}/> )) .to.be('<div>...')
或者只是抓取innerHTML并手动剥离它,但我不知道跨浏览器有多可靠:
var reactAttrs = / data-react[-\w]+="[^"]+"/g myElement.getDOMNode().innerHTML.replace(reactAttrs,'')
我曾经使用React.renderComponentToString并在添加React.renderToStaticMarkup之前手动剥离数据反应器.