IT技术 - 如何在appendchild方法javascript或reactjs中使用文件夹路径中的svg？ - 吾爱随笔录

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

IT技术 javascript reactjs

2021-05-04 01:50:36

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

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

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

我有一个 svg 导入到组件中，如下所示 import SvgName from '../svg/name.svg';

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

我试过的……在下面，

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

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

我怎样才能实现它。谢谢。

3个回答

来自create-react-app

上一节描述了一种添加 SVG 文件的方法。您还可以将 SVG 直接作为 React 组件导入。您可以使用这两种方法中的任何一种。在您的代码中，它看起来像这样：

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo />
  </div>
);

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

在这里阅读全文

svg您示例中的元素是一个 react 组件，因此可以使用将其呈现在 DOM 元素中ReactDOM.render，如下所示：

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

该ReactDOM.render电话并不一定必须在componentDidMount处理程序中，你可以在你觉得组件的生命周期的任何部分使用它，只要this.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;

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

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

其它你可能感兴趣的问题

上一篇如何删除特定的子 React 组件？下一篇带有 BTT E3 RRF v1.1 的 Ender 3 Pro 上的“SD Init Fail”