将 JSON 数据加载并渲染到 React 组件中
介绍
在 React 中构建应用程序时，我们经常需要处理 JSON 数据。这些数据可能来自第三方 API，也可能从外部文件读取。在本指南中，我们将使用一个代码示例来从文件加载 JSON 数据并将其呈现在 React 组件中。
用例
假设您有一个 JSON 格式的数据集，其中包含来自多家公司的金融股票信息。每只股票都有与之关联的元数据。您的目标是从外部文件读取该数据并以表格格式呈现在网页上，如下所示。
设置 React App
打开你的终端并运行这些命令以使用 Create React App 在你的机器上运行示例应用程序。
npx create-react-app load-json-data
cd load-json-data
yarn start
现在，要在开发模式下运行该应用程序，请在浏览器中打开https://localhost:3000。您应该看到示例应用程序正在运行，并带有 React 徽标。
将 JSON 数据添加到文件
在您的项目中的src/data.js位置创建一个文件，并在您的data.js文件中添加以下数据。
export const stockData = [
{
company: "Twitter Inc",
ticker: "TWTR",
stockPrice: "22.76 USD",
timeElapsed: "5 sec ago",
},
{
company: "Square Inc",
ticker: "SQ",
stockPrice: "45.28 USD",
timeElapsed: "10 sec ago",
},
{
company: "Shopify Inc",
ticker: "SHOP",
stockPrice: "341.79 USD",
timeElapsed: "3 sec ago",
},
{
company: "Sunrun Inc",
ticker: "RUN",
stockPrice: "9.87 USD",
timeElapsed: "4 sec ago",
},
{
company: "Adobe Inc",
ticker: "ADBE",
stockPrice: "300.99 USD",
timeElapsed: "10 sec ago",
},
{
company: "HubSpot Inc",
ticker: "HUBS",
stockPrice: "115.22 USD",
timeElapsed: "12 sec ago",
},
];
stockData是一个 JSON 数组，包含一些公司的虚拟股票价格。此数组中的每个 JSON 对象包含四个内容：
- 公司名称
- 公司的股票行情机
- 股票价格
- 最后更新时间（秒）
使用export const可以定义和初始化可以导入到任何 React 组件中的变量。事实上，您将在下一步中将stockData作为 JavaScript 对象导入。
更新应用程序组件
现在是时候更新我们的<App>组件了，因为我们需要将 JSON 数据渲染到组件中。因此，请转到src/App.js文件并删除其中附带的所有样板代码。相反，将这段代码添加到<App>组件中。
import React from "react";
import "./App.css";
import { Stocks } from "./Stocks";
function App() {
return (
<div className="App">
<Stocks />
</div>
);
}
export default App;
转到浏览器并打开https://localhost:3000。您将在应用程序中看到错误，因为<App/>组件包装并返回了一个尚不存在的<Stocks/>组件。别担心 - 您接下来将添加这个新组件。
创建股票组件
现在，您将在src目录中添加一个新组件并将其命名为Stocks.js 。 <Stocks/>组件在项目中的位置应为src/Stocks.js。将以下代码添加到您的<Stocks>组件文件中。该代码目前除了返回包含消息Welcome to Stock Tracker的<div>外不执行任何操作，但您很快就会扩展此代码。
import React from "react";
import "./App.css";
export const Stocks = () => {
return (
<>
<div className="stock-container">Welcome to Stock Tracker</div>
</>
);
};
在src/App.css文件中添加css类stock-container。App.css文件中的代码应如下所示。
.App {
text-align: center;
}
.stock-container {
padding-left: 3em;
padding-right: 3em;
margin-top: 3em;
}
转到浏览器并打开https://localhost:3000 。您应该看到网页上呈现Welcome to Stock Tracker消息，并且不应该有任何错误。
将 JSON 数据加载到股票组件
现在您的<Stocks>组件已准备就绪，您可以从src/data.js文件获取 JSON 数据并将其呈现在<Stocks>中。React 允许使用命名导入，我们可以利用这一点来加载 JSON 数据。因此，继续将此导入添加到您的src/Stocks.js文件中。
import { stockData } from "./data";
下一个任务是迭代从data.js文件导入的stockData数组。在<Stocks>组件内，添加逻辑以遍历stockData数组中的每个元素。
import React from "react";
import "./App.css";
import { stockData } from "./data";
export const Stocks = () => {
return (
<>
<div className="stock-container">
{stockData.map((data, key) => {
return (
<div key={key}>
{data.company +
" , " +
data.ticker +
" ," +
data.stockPrice +
", " +
data.timeElapsed}
</div>
);
})}
</div>
</>
);
};
让我们来分析一下上面的代码。它映射到stockData JSON 数组上，该数组以回调函数为参数。然后对stockData数组中的每只股票调用此函数。每次执行回调时，它都会返回并呈现一个<div>，以逗号分隔的方式显示每家公司的数据。
转到浏览器并打开https://localhost:3000。所有股票的数据应在网页上以行的形式呈现。您将在下一步中以表格格式呈现它。但现在您应该看到所有 JSON 数据。
以表格形式显示股票信息
最后一项工作是在组件中呈现该数据。我们需要做一些更改：
- 添加<HomePageHeader>组件来显示页眉。
- 添加一个<Stock>组件，该组件接受道具中的数据并在网页上呈现表格。
- 重构<Stocks>组件内的代码以适应上述两个更改。
在src/Stocks.js文件内的<HomePageHeader>组件中添加这段代码。
const HomePageHeader = () => {
return (
<header className="header">
<h2>Your Stock Tracker</h2>
</header>
);
};
<HomePageHeader>组件也使用 CSS 类 header，因此我们需要将其添加到src/App.css中。
.header {
background-color: #f4e04d;
min-height: 10vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: #10375c;
}
下一个任务是创建一个<Stock>组件，以便您可以抽象代码以分别呈现每只股票。继续在src/Stocks.js文件中为<Stock>组件添加此代码。<f
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~