我是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(一个已导入)。
我怎样才能做到这一点。谢谢。
svg您示例中的元素是react组件,因此可以使用将该元素呈现在DOM元素内ReactDOM.render,如下所示:
svg
ReactDOM.render
componentDidMount() { ReactDOM.render(<SvgComponent />, this.element); }
该ReactDOM.render电话并不一定必须在componentDidMount处理程序中,你可以在你觉得组件的生命周期的任何部分使用它,只要this.element是初始化的DOM元素。
componentDidMount
this.element