如何在 reactjs 中以编程方式修改 dom 元素？

Question

我正在构建一个 reactjs 应用程序。我得到 html 内容作为字符串。例如：

  state= {elem:`<div>
          <p>...</p>
          <a href="www.twitter.com"></a>
          <h1>Heading</h1>
          <div>
            <a href="www.facebook.com"></a>
          </div>
        </div>`.}

我将在 dom 中使用 <div dangerouslySetInnerHTML={this._createMarkup()} />

进行设置

 _createMarkup = () => {
        return { __html: this.state.elem};
    };

我需要解析它并进行修改，而不是直接在 dom 中呈现这个 html 片段。也就是说，只要有锚标记，如果 href 属性中没有它，我就需要附加 http:// 。代码段中可以有多个锚标记。我怎样才能做到这一点？

Answer 1

您可以使用得到广泛支持的 DOMParser 来实现这一点。

这是一个小片段。

const parser = new DOMParser();
const htmlText = `<div>
          <p>...</p>
          <a href="www.twitter.com">Twitter</a>
          <h1>Heading</h1>
          <div>
            <a href="www.facebook.com">Facebook</a>
          </div>
        </div>`;

let content = parser.parseFromString(htmlText, "text/html");
const anchors = content.getElementsByTagName('a');


Array.from(anchors).forEach(v => {
  const href = v.getAttribute("href");

  if (!href.includes('http://')) {
    v.href = 'http://' + href;
  }
})


console.log(content.body.innerHTML); // Here it is your new string

const App = () => (
  <div>
    <div dangerouslySetInnerHTML={{ __html: content.body.innerHTML}} />
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

如何在 reactjs 中以编程方式修改 dom 元素？

How to modify dom elements programmatically in reactjs?

javascript

anchor

dom

reactjs