Question

我的一个组件有一个div元素，我想在其中溢出并处理/改变我自己的DOM - 没有React干扰。

我正在使用d3.js进行手动DOM操作，而且我不是在寻找react-d3解决方案，我需要简单的d3。

除了响应控制台警告之外，一切都适合我：

warning.js:44Warning: Unknown prop `xmlns` on <svg> tag. Remove this prop from the element. For details, see

和

warning.js:44 Warning: Unknown DOM property class. Did you mean className?

所以它抱怨我使用class而不是className或者有一些html属性没有反应风格等。

我想告诉React，从这个组件及其下面，它不应该干扰，我会手动管理这个组件下面的DOM。

代码看起来像这样：

import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import SomeD3CustomComp from '../some-d3-custom-comp.js';

export default class MyComponent extends Component {

  componentDidMount() {
   this.injectChart();
  }

  componentDidUpdate() {
   this.injectChart();
  }

  injectChart() {
    const comp = findDOMNode(this.refs.nonReactContainer);
    const { chart } = this.props;
    const { shouldRender, data } = chart;
    if (shouldRender) {
      SomeD3CustomComp.render(comp, data);
    }
  }

  render() {
    const { chart, someOtherData } = this.props;
    const { shouldRender } = chart;
    return(
      <article>
        {
          shouldRender &&
          <div className="non-react-element" ref="nonReactContainer"></div>
        }
        <div className="react-element">{someOtherData}</div>
      </article>
    );
  }
}

更新

在false上返回shouldComponentUpdate的建议并没有带走我上面提到的错误消息，可能是因为shouldComponentUpdate仅在有更新时发生 - 在首先注入componentDidMount。

该方法的另一个问题是，如果返回false代码永远不会到达实现更多逻辑的render方法，例如在上面的例子中我检查是否呈现容器非反应元素。这是我在之前的状态中简单地删除所有先前注入的元素的方式。

所以我仍在寻求帮助......

解决！

误报警：/刚发现这些警告信息与代码的不同部分有关。从这个新功能开发和一些老问题开始，这是一个奇怪的巧合。结论：在警告信息中看起来更难！因此，与d3的这种集成实际上很有效。

如何告诉react.js不要调和或干扰某个元素？

更新

解决！

0 个答案: