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

我是reactjs新手，我坚持将svg元素附加到div元素

我想实现什么？ 我有一个动态创建的div元素，如下所示

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

我将svg导入到组件中，如下所示 从“../svg/name.svg”导入SvgName

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

下面是我尝试过的

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

上面将附加一个svg元素，但是它没有添加我想要的svg（导入的svg）

---

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

示例中的

svg

元素是一个react组件，因此可以在DOM元素中使用

ReactDOM.render

呈现，如下所示：

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

componentDidMount（）{
render（，this.element）；
}

---

ReactDOM.render

调用不一定必须在

componentDidMount

处理程序中，您可以在组件生命周期的任何部分使用它，只要

this.element

是初始化的DOM元素。

示例中的

svg

元素是react组件，因此，可以使用

ReactDOM.render

在DOM元素内部渲染它，如下所示：

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

componentDidMount（）{
render（，this.element）；
}

---

ReactDOM.render

调用不一定必须在

componentDidMount

处理程序中，您可以在组件生命周期的任何部分使用它，只要

这个.element

是一个初始化的DOM元素。

如果您想动态创建元素，我建议您使用组件的状态。在react中，像您这样直接使用DOM是不好的做法。因此，您的代码应该如下所示：

import React from "react";
import {ReactComponent as SvgName} from '../svg/name.svg'

class SomeClass extends React.Component {
  state = {
    renderImage: false,
  }

  componentDidMount() {
    if(someConditionMets) {
       this.setState({renderImage: true});
    }
  }

  render() {
    if (this.state.renderImage) return <div><SvgName /></div>;

    return null;
  }
}

export default SomeClass;

从“React”导入React；
从“../svg/name.svg”导入{ReactComponent as SvgName}
类SomeClass扩展了React.Component{
状态={
渲染：假，
}
componentDidMount（）{
如果（某些条件）{
this.setState（{renderImage:true}）；
}
}
render（）{
如果（this.state.renderImage）返回；
返回null；
}
}
导出默认类；

或者，如果希望每次都渲染div，可以将“渲染方法”更改为：

  render() {
    return <div>{this.state.renderImage && <SvgName />}</div>
  }

render（）{
返回{this.state.renderImage&&}
}

如果您想动态创建元素，我建议您使用组件的状态。在react中，像您这样直接使用DOM是不好的做法。因此，您的代码应该如下所示：

import React from "react";
import {ReactComponent as SvgName} from '../svg/name.svg'

class SomeClass extends React.Component {
  state = {
    renderImage: false,
  }

  componentDidMount() {
    if(someConditionMets) {
       this.setState({renderImage: true});
    }
  }

  render() {
    if (this.state.renderImage) return <div><SvgName /></div>;

    return null;
  }
}

export default SomeClass;

从“React”导入React；
从“../svg/name.svg”导入{ReactComponent as SvgName}
类SomeClass扩展了React.Component{
状态={
渲染：假，
}
componentDidMount（）{
如果（某些条件）{
this.setState（{renderImage:true}）；
}
}
render（）{
如果（this.state.renderImage）返回；
返回null；
}
}
导出默认类；

或者，如果希望每次都渲染div，可以将“渲染方法”更改为：

  render() {
    return <div>{this.state.renderImage && <SvgName />}</div>
  }

render（）{
返回{this.state.renderImage&&}
}

来自

上面一节介绍了添加SVG文件的一种方法。你可以 也可以将SVG直接作为React组件导入。你可以使用这两种方法中的任何一种 这两种方法。在您的代码中，它将如下所示：

从'/Logo.svg'导入{ReactComponent as Logo}；
常量应用=（）=>(
{/*徽标是实际的React组件*/}
);

这将svg作为组件加载，您可以使用它

从

上面一节介绍了添加SVG文件的一种方法。你可以 也可以将SVG直接作为React组件导入。你可以使用这两种方法中的任何一种 这两种方法。在您的代码中，它将如下所示：

从'/Logo.svg'导入{ReactComponent as Logo}；
常量应用=（）=>(
{/*徽标是实际的React组件*/}
);

这将svg作为组件加载，您可以使用它

全文