Colonne React Recharts lors du premier rendu
<p><br /></p>
<pre class="brush:php;toolbar:false;">import React, { Fragment, useCallback } from "react" ;
importer {
Diagramme à bandes,
Bar,
Conteneur réactif,
Cellule,
Liste d'étiquettes,
l'axe Y,
} à partir de "recharts" ;
importer { fontSizes, textColors } depuis "styles/thème" ;
const CustomLabelImage = (props : any) => {
const { x, y, valeur } = accessoires ;
retour (
<Clé de fragment={`${Math.random()}`}>
<image
x={+x! - 5}
clipPath={"cercle(40%)"}
y={y - 105}
largeur={55}
hauteur={55}
href={valeur}
/>
</Fragment>
);
} ;
const CustomLabel = (props : any) => {
const { x, y, valeur } = accessoires ;
retour (
<Clé de fragment={`${Math.random()}`}>
<texte
x={x}
y={y}
nom de classe="grotesk"
style={{
poids de la police : 600,
taille de police : fontSizes.f20,
}}
dx={10}
dy={-10}
textAnchor="haut"
fill={textColors.sceptreBlue}
>
{valeur}
</texte>
</Fragment>
);
} ;
const CustomLabelName = (props : any) => {
const { x, y, valeur } = accessoires ;
retour (
<Clé de fragment={`${Math.random()}`}>
<texte
x={x}
y={y}
nom de classe="grotesk"
style={{
poids de la police : 300,
taille de police : fontSizes.f10,
}}
dx={-4}
dy={-35}
textAnchor="haut"
fill={textColors.sceptreBlue}
>
{valeur?.split(" ")[0]} {valeur?.split(" ")(1]?.slice(0, 1)}
</texte>
</Fragment>
);
} ;
exporter la fonction par défaut BarChartRedList ({
données,
couleur,
} : {
données : {heure : chaîne ; perdu : numéro ; avatar ? : chaîne }[];
withLabel? : booléen ;
withAvatar ? : booléen ;
couleur ? : chaîne ;
}) {
const renderItems = useCallback(() => {
retour (
<Fragment>
{data.map((élément, index) => {
retour (
<Fragment key={`${item.lost}_${index}`}>
<ListeÉtiquettes
dataKey="avatar"
position = "haut"
clé={`cell3-${index}`}
largeur={100}
décalage={10}
content={<CustomLabelImage />}
/>
<ListeÉtiquettes
dataKey="heure"
clé={`cell2-${index}`}
position = "haut"
décalage={10}
largeur={100}
content={<CustomLabelName />}/>
<ListeÉtiquettes
dataKey="perdu"
position = "haut"
clé={`cell1-${index}`}
décalage={5}
largeur={"100px"}
content={<CustomLabel />}
/>
<Cellule
rayon={8}
clé={`cellule-${index}`}
largeur={40}
décalage={20}
fill="url(#barGradient)"
/>
</Fragment>
);
})}
</Fragment>
);
}, [données]);
retour (
<div>
<Hauteur du ResponsiveContainer={350}>
<Graphique à barres
largeur={500}
hauteur={200}
données={données}
marge={{
haut : 120,
à droite : 0,
gauche : 0,
bas : 20,
}}
>
<defs>
<linearGradient id="barGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={color} stopOpacity={1} />
<stop offset="95%" stopColor={color} stopOpacity={0.2} />
</linearGradient>
</defs>
<Bar yAxisId="left" dataKey="lost">
{renderItems()}
</Barre>
</Graphique à barres>
</ResponsiveContainer>
</div>
);
}</pré>
<p>不如我预期的那样。在窗口加载后的第一次渲染中，图片和文本不可见，但在进行一些操作后它们会变得可见。我无法解决这个问题。请帮我找出如何解决这个问题。</p><p>我的包版本是："recharts": "^2.4.3", "next": "13.4.7", "react": "18.2.0"。</p><p><br />< /p>
