https:/www.youtube.comwatch?v=khJlrj3Y6Ls我正在按照这个教程
在这里,有一个页面上显示的图表数据,我想显示一个名为 “linechart2 “的重复线图,就在linechart下面。
这是我的图表文件index.js。
import React, { useState, useEffect } from "react";
import { Line, Bar } from "react-chartjs-2";
import { fetchDailyData } from "../../api";
import styles from "./Chart.module.css";
const Chart = ({ data: { confirmed, recovered, deaths }, country }) => {
const [dailyData, setDailyData] = useState({});
useEffect(() => {
const fetchMyAPI = async () => {
const initialDailyData = await fetchDailyData();
setDailyData(initialDailyData);
};
fetchMyAPI();
}, []);
const barChart = confirmed ? (
<Bar
data={{
labels: ["Infected", "Recovered", "Deaths"],
datasets: [
{
label: "People",
backgroundColor: [
"rgba(0, 0, 255, 0.5)",
"rgba(0, 255, 0, 0.5)",
"rgba(255, 0, 0, 0.5)",
],
data: [confirmed.value, recovered.value, deaths.value],
},
],
}}
options={{
legend: { display: false },
title: { display: true, text: `Current state in ${country}` },
}}
/>
) : null;
const lineChart = dailyData[0] ? (
<Line
data={{
labels: dailyData.map(({ date }) => date),
datasets: [
{
data: dailyData.map((data) => data.confirmed),
label: "Infected",
borderColor: "#3333ff",
fill: true,
},
{
data: dailyData.map((data) => data.deaths),
label: "Deaths",
borderColor: "red",
backgroundColor: "rgba(255, 0, 0, 0.5)",
fill: true,
},
],
}}
/>
) : null;
const lineChart2 = dailyData[0] ? (
<Line
data={{
labels: dailyData.map(({ date }) => date),
datasets: [
{
data: dailyData.map((data) => data.confirmed),
label: "Infected",
borderColor: "#3333ff",
fill: true,
},
{
data: dailyData.map((data) => data.deaths),
label: "Deaths",
borderColor: "red",
backgroundColor: "rgba(255, 0, 0, 0.5)",
fill: true,
},
],
}}
/>
) : null;
return (
<div className={styles.container}>{country ? barChart : lineChart}</div>
);
};
export default Chart;
我想在LineChart的下面显示一个副本,我试着把它写在返回函数中。
return (
<div className={styles.container}>{country ? barChart : lineChart}</div>
<div className={styles.container}>{lineChart2}</div>
);
解决方案:
你只能有一个根div里面 return ()
. 尝试用 React.Fragment
return (
<React.Fragment>
<div className={styles.container}>{country ? barChart : lineChart}</div>
<div className={styles.container}>{lineChart2}</div>
</React.Fragment>
);