我需要把markdowon转化成html在页面中呈现,所以我使用了dangerouslySetInnerHTML
<div ref="article" className="markdown" dangerouslySetInnerHTML={{__html: this.props.content}}></div>
我写了一个自动为文章生成目录的库,并希望在render完成后为它生成目录:
componentDidMount () {
let article = React.findDOMNode(this.refs.article);
let index = autoIndex(article);
this.props.onIndexed(index);
}
然而我发现此时获取到的article中并没有children,于是我推测此时组件虽然被挂载,但文章却还并没有被render。
于是我试着在下一次事件循环再生成目录。
setTimeout(() => {
let article = React.findDOMNode(this.refs.article);
let index = autoIndex(article);
this.props.onIndexed(index);
}, 0);
然而并没有什么用。现在我用一个1s的timeout来让目录生成出来,但这样的方式并不靠谱,有什么办法可以确认dangerouslySetInnerHTML真正的把html给set好呢?感谢大家
回来填坑:
过了段时间又回过头来看这个问题,在github上也提了issue,突然发现是自己傻了:
其实这并不是dangerouslySetInnerHTML的问题,经过多次测试,componentDidMount
的时候,dangerouslySetInnerHTML已经完成了自己的工作。我遇到这个问题的原因其实是因为我的文章内容是异步获取然后更新我的Render组件的props,所以Render组件第一次mount,content其实还没有拿到…在componentDidUpdate
的时候看content更新的话,就重新生成一次目录即可。