关于react中的dangerouslySetInnerHTML元素提取问题

Question

现在有这样一段代码

content='<a close="true">点我1</><a>点我2</a>'
const html = {__html:content}

<div className="html-wrap" dangerouslySetInnerHTML={html}></div>

我希望当close属性为true时，可以点击，否则点不了，应该怎么获取这个属性？

Answer 1

确认渲染完毕（通常是在 componentDidMount 函数中，如果组件 state 中途有更新的话，可能需要在 componentDidUpdate函数中进行 ）之后，通过 DOM 接口获取到这个 a标签元素，然后 (a.getAttribute('close') === 'true'就能判断。
如果 a 标签的点击事件由 JS 处理的话，可以将点击事件委托给 html-wrap，在其中判断事件是否经过此 a 元素，拿到此元素之后同样通过 a.getAttribute('close') === 'true' 判断是否需要执行对应的回调函数。