同一个svg渲染不同

场景: 在同一个Tab下的两个Pane中加载了同一个组件,发现第二个pane中的组件显示svg效果和第一个pane不一样

• 第一个pane
  

• 第二个pane
  

两个pane渲染的是同一个组件,一开始我以为是React.memo渲染缓存的问题,导致第二次加载svg的问题

• App

<Tabs defaultActiveKey="1" onChange={onChange} activeKey={num}>
  <TabPane tab="机器学习" key="1">
     <LearingTable
       learningType='ml'
     />
   </TabPane>
   <TabPane tab="深度学习" key="2">
     <LearingTable
       learningType='dl'
     />
   </TabPane>
 </Tabs>

• LearingTable

const LearingTable = React.memo(() => {
	return (<div></div>)
})

但是反复测试都没有解决,后来发现svg的设计有问题,同一张svg不能出现在同一个页面dom中

解决

assets中存入两个名字不一样,内容一样的svg,通过props传入参数用于区分不同的svg(但他们本质上是一样的)

<div className={styles.content}>
	 {
	   learningType 
	   ? learningType === LEARNING_TYPE.ML
	       ? <NoDataIcon />
	       : <NoData1Icon />
	     : <NoDataIcon />
	 }
 <div>