在ReactJS中提取Nivo的子svg节点

编程问答 2022-08-13

问题描述

我正在尝试通过使用以下方法将Nivo生成的Image转换为svg缓冲区，将Nivo图包含到@react-pdf/renderer的Base64组件中react-dom/server。

此svg由两个div的父母包裹。阅读了React的文档后，我设法像这样提取了组件的子级子项

const RenderSecondChildren = props => 
   React.Children.map(props.children,child1 => 
      React.Children.map(child1.props.children,child2 =>
         React.Children.map(child2.props.children,child3 => 
            React.cloneElement(child3,{ style: { height,width } })
         )
      )
   )

我不确定这是否正确，但是可以通过检查以下浏览器中的元素来实现

<RenderSecondChildren>
   <div comment={'this dies'}>   
      <div comment={'this also dies'}>
         <p>Only I should exist</p>
      </div>
   </div>
</RenderSecondChildren>

显示预期的行为，仅呈现<p>Only I should exist</p>，而不呈现div。但是，当我对Nivo组件执行相同操作时，它将无法正常工作

<RenderSecondChildren>
   <NivoGraph />
</RenderSecondChildren>

child1.props似乎是一个空对象。我仍然是这个React单词的新手，所以我不知道自己缺少什么。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

graphjavascriptreact-pdfreactjsreactjssvg