首次渲染时，React Recharts柱状

Question

<p><br />></p> <pre class="brush:php;toolbar:false;">从“react”导入 React, { Fragment, useCallback }; 进口 { 条形图， 酒吧， 响应式容器， 细胞， 标签列表， Y轴， } 来自“重新图表”； 从“样式/主题”导入{ fontSizes，textColors }； const CustomLabelImage = (props: 任意) => { const { x, y, 值 } = 道具； 返回 （ <片段键={`${Math.random()}`}> <图像 x={+x! - 5} ClipPath={"圆(40%)"} y = {y - 105} 宽度={55} 高度={55} href={值} >> </片段> ）； }; const CustomLabel = (props: 任意) => { const { x, y, 值 } = 道具； 返回 （ <片段键={`${Math.random()}`}> <文本 x={x} y={y} 类名=“格罗泰斯克” 风格={{ 字体粗细：600， 字体大小：fontSizes.f20， }} dx={10} dy={-10} textAnchor=“顶部” 填充={textColors.sceptreBlue} > {价值} </文字> </片段> ）； }; const CustomLabelName = (props: 任意) => { const { x, y, 值 } = 道具； 返回 （ <片段键={`${Math.random()}`}> <文本 x={x} y={y} 类名=“格罗泰斯克” 风格={{ 字体粗细：300， 字体大小：fontSizes.f10， }} dx={-4} dy={-35} textAnchor=“顶部” 填充={textColors.sceptreBlue} > {value?.split(" ")[0]} {value?.split(" ")[1]?.slice(0, 1)} </文字> </片段> ）； }; 导出默认函数 BarChartRedList({ 数据， 颜色， }：{ 数据：{ 时间：字符串；丢失：数量；头像？: 字符串 }[]; withLabel？：布尔值； withAvatar？：布尔值； 颜色？：字符串； }) { const renderItems = useCallback(() => { 返回 （ <片段> {data.map((项目, 索引) => { 返回 （ <片段键={`${item.lost}_${index}`}> <标签列表 dataKey="头像" 位置=“顶部” 键={`cell3-${index}`} 宽度={100} 偏移量={10} 内容={<自定义标签图像/>} >> <标签列表 数据键=“时间” 键={`cell2-${index}`} 位置=“顶部” 偏移量={10} 宽度={100} 内容={<自定义标签名称/>}>> <标签列表 数据键=“丢失” 位置=“顶部” 键={`cell1-${index}`} 偏移量={5} 宽度={“100px”} 内容={<自定义标签/>} >> <细胞 半径={8} 键={`单元格-${索引}`} 宽度={40} 偏移量={20} 填充=“网址（#barGradient）” >> </片段> ）； })} </片段> ）； }， [数据]）; 返回 （

<条形图 宽度={500} 高度={200} 数据={数据} 保证金={{ 顶部：120， 右：0， 左：0， 底部：20， }} > <定义> <线性渐变 id="barGradient" x1="0" y1="0" x2="0" y2="1"> > > </线性渐变> </defs> <Bar yAxisId="left" dataKey="lost"> {渲染项目()} </栏> </条形图> </响应式容器>

）； }</pre> <p>在窗口加载后的第一次点击按钮之后，</p><p>我尝试使用图片渲染柱状图，但结果并不如我预想的那样。在窗口加载后的第一次渲染中，图片和文本不可见，但在进行一些操作后它们会变得可见。我无法解决这个问题。请帮我找出如何解决这个问题。</p><p>我的包版本是："recharts": "^2.4.3", "next": "13.4.7", "react": "18.2.0"。</p><p><br />< /p>

Answer 1

经过一些研究，我找到了解决方案。

<Bar 
   yAxisId="left"
   dataKey="lost"
   isAnimationActive={false} //added this
>
  {renderItems()}
</Bar>