小编典典

如何在appendchild方法javascript或reactjs中的文件夹路径中使用svg?

reactjs

我是Reactjs的新手,我坚持将svg元素附加到div元素。

我要实现什么?我有一个动态创建的div元素,如下所示。

  constructor(props) {
      super(props);
      this.element = document.createElement('div');
}

我有一个svg导入到组件中,如下所示:从’../svg/name.svg’中导入import SvgName;

并希望将此SvgName附加到上述构造函数中动态创建的div元素上。

我尝试过的…

constructor(props) {
      super(props);
      this.element = document.createElement('div');
      const svg = document.createElement('svg');
      this.element.appendChild(svg);
}

上面将添加一个svg元素,但是它不会添加我想要的svg(一个已导入)。

我怎样才能做到这一点。谢谢。


阅读 578

收藏
2020-07-22

共1个答案

小编典典

svg您示例中的元素是react组件,因此可以使用将该元素呈现在DOM元素内ReactDOM.render,如下所示:

componentDidMount() {
    ReactDOM.render(<SvgComponent />, this.element);
}

ReactDOM.render电话并不一定必须在componentDidMount处理程序中,你可以在你觉得组件的生命周期的任何部分使用它,只要this.element是初始化的DOM元素。

2020-07-22