在React 16示例中如何添加和显示数据
UI可以执行的基本操作之一就是显示一些数据。 React使显示数据变得容易，并在数据更改时自动使界面保持最新。我们将创建一个小型应用程序，在该应用程序中，单击按钮即可在列表中添加酒店卡，并显示该酒店卡。在这个例子中，我将使用React 16，它是React的最新版本。
如何在React中添加和显示数据
使用create-react-app创建一个新的React.js项目。
npx create-react-app reactx
进入文件夹，然后在Visual Studio Code中打开项目文件夹。
然后安装Bootstrap 4 Framework。
yarn add bootstrap
将Bootstrap CSS文件导入src >> App.js文件中。
在App.js文件中编写以下代码。
// App.js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
Add and Display Data in React 16
);
}
export default App;
如您所见，我们已经导入了bootstrap.min.css文件。
React使用一种称为JSX的类似XML的语法。 React使创建交互式用户界面（UI）变得轻松自如。
使用React，我们可以为应用程序中的每个状态设计简单的视图，当数据发生变化时，React将有效地更新和呈现正确的组件。
声明式视图使我们的代码更具可预测性且更易于调试。
创建React组件
在src文件夹中，创建一个名为components的新目录。
在该文件夹内，创建两个组件。
- HotelList.js
- HotelCard.js
我们将创建一个HotelList.js作为基于类的React Component，因为它处理状态。
我们将把HotelCard.js创建为功能组件，因为它不处理任何数据。
React中的功能组件
该功能组件只是一个接受道具并返回React元素的函数。但是您也可以使用ES6语法编写组件。
句法
function Welcome(props) {
return Hello, {props.name}
;
}
功能组件只是普通的JavaScript函数，它接受prop作为参数并返回React元素。
因为它只是一个JavaScript函数，所以不能在组件中使用setState（）。
这就是为什么它们也被称为功能性无状态组件的原因。因此，每次看到功能组件时，都可以确保该特定组件没有其状态。
React中的类组件
一个类组件需要您从React.Component扩展并创建一个返回React元素的渲染函数。
句法
class Welcome extends React.Component {
render() {
return Hello, {this.props.name}
;
}
}
如果您需要组件中的状态，则需要创建一个类组件，或者将状态提升到父组件，然后通过props将其传递给功能组件。
您不能在功能组件中使用的另一个功能是生命周期挂钩。原因与状态相同，所有生命周期挂钩都来自您在类组件中进行扩展的React.Component。
因此，如果需要生命周期挂钩，则可能应该使用类组件。
现在，让我们回到我们的项目。
在HotelCard.js文件中编写以下代码。
// HotelCard.js
import React from 'react'
export function HotelCard() {
return (
Taj Hotels is a chain of luxury hotels and a subsidiary of the Indian Hotels Company Limited; headquartered at Express Towers, Nariman Point in Mumbai. Incorporated by the founder of the Tata Group, Jamsetji Tata, in 1903, the company is a part of the Tata Group, one of India's largest business conglomerates.
);
}
我们将此组件定义为功能组件，因为它不必处理状态。这是一个卡片组件，我们将在屏幕上显示它。
创建一个类组件
我们已经创建了HotelCard.js组件。现在，我们需要创建一个HotelList.js组件，它是基于类的组件。
在HotelList.js文件中编写以下代码。
// HotelList.js
import React, { Component } from 'react';
import { HotelCard } from '../components/HotelCard';
export class HotelList extends Component {
constructor() {
super();
this.state = {
hotels: [1, 1, 1]
}
}
renderHotels() {
return this.state.hotels.map((hotel, i) => (
Hotel Rooms
{this.renderHotels()}
)
}
}
让我在这里解释代码。
首先，我们导入了React和HotelCard组件。
然后，我们定义了一个构造函数。定义构造函数时，您需要编写super（）函数，因为类组件扩展了react库的Component类。如果您不编写super（）函数，则会收到错误消息。
下一个语句是setState（）函数。
React组件可以并且经常具有状态。状态可以是任何东西。
setState（）函数是初始状态设置后更新状态的唯一合法方法。
在setState（）函数内部，我们初始化了带有1、1、1元素的hotels数组。
在这里，数组具有硬编码的值，但实际上，数组具有来自Web表单的用户定义的值。
然后，我们定义了两个函数。
renderHotels（）
此函数返回HotelCard组件。该函数返回编号。根据酒店阵列的长度划分的卡片数量。
因此，renderHotels（）函数呈现酒店列表。
addHotelRoom（）
addHotelRoom（）函数修改状态并将一个元素添加到hotel数组中。如果用户单击该按钮，则将一项推入数组，然后render（）函数将再次渲染并显示另外一个HotelCard。
最后一个函数是render（）函数。 render（）函数返回一个JSX。如果更改了类的状态，则render（）函数将根据修改后的状态重新渲染并显示数据。
因此，刷新页面时，它将首先初始化状态并调用render（）函数。
根据状态中的可用数据，render（）函数将返回JSX。
现在，最后一步是将App.js组件中的HotelList.js组件导入。
// App.js
import React from 'react';
import { HotelList } from './components/HotelList';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
保存文件并使用以下命令启动React开发服务器。
yarn start
查看输出。
如果单击“添加房间”按钮，则会在屏幕上添加一张卡。
如果要与后端服务器进行交互，则可以使用axios库发送和接收网络请求。
因此，这就是您可以在React.js中添加和显示数据的方式。