你可以用一个用户界面做的基本事情之一就是显示一些数据。React使显示数据变得很容易，并在数据变化时自动保持界面的更新。例如，我们将创建一个小程序，在这个程序中，我们可以通过点击按钮将一个酒店卡添加到列表中，并显示该酒店卡。在这个例子中，我将使用React 16，它是现在React的最新版本。
在React中添加和显示数据
要在React中添加和显示数据，请遵循以下简单步骤。首先， 使用create-react-app创建 一个新的React.js项目。
npx create-react-app reactx
进入该文件夹，在Visual Studio Code中打开项目文件夹。
然后安装Bootstrap 4框架。
yarn add bootstrap
在src >> App.js 文件中导入Bootstrap CSS文件。
在App.js 文件中写下以下代码。
// App.js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div className="container">
Add and Display Data in React 16
</div>
);
}
export default App;
你可以看到，我们已经导入了bootstrap.min.css 文件。
React使用了一种类似XML的语法，称为JSX。因此，React 使创建交互式用户界面（UI）变得不费力。
使用React，我们可以为我们的应用程序中的每个状态设计简单的视图，当我们的数据发生变化时，React将有效地更新和渲染正确的组件。
声明性视图使我们的代码更可预测，更容易调试。
创建React组件
在src 文件夹中，创建一个名为components的新目录.
在该文件夹中，创建两个组件：
- HotelList.js
- HotelCard.js
我们将把HotelList.js创建为一个基于类的React组件，因为它处理的是状态。
我们将把HotelCard.js创建为一个功能组件，因为它不处理数据。
React中的功能组件
功能性组件只是一个接受props并返回React元素的函数。但你也可以使用ES6的语法来编写组件。
语法
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
一个功能组件是一个普通的JavaScript函数，它接受props作为参数，并返回一个React元素。
因为它只是一个JavaScript函数，你不能在你的组件中使用setState() 。
这就是为什么它们也被称为功能性无状态组件的原因。因此，每当你看到一个功能性组件，你可以确定这个特定的组件没有它的状态。
React中的类组件
类组件要求你从React.Component扩展，并创建一个返回React元素的渲染函数。
语法
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
如果你需要组件中的状态，你将需要创建一个类组件或将状态提升到父组件，并通过props将其传递给功能组件。
另一个你不能在功能组件中使用的特性是生命周期钩子。原因和状态一样，所有的生命周期钩子都来自于React.Component，而你是在类组件中扩展的。
所以如果你需要生命周期钩子，你可能应该使用类组件。
现在，让我们回到我们的项目中来。
在HotelCard.js文件中写下以下代码:
// HotelCard.js
import React from 'react'
export function HotelCard() {
return (
<div className="col-md-3 col-xs-6">
<div className="card">
<img className="card-img-top" src="http://via.placeholder.com/350x250" alt=""></img>
<div className="card-body">
<p className="card-text">
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.
</p>
</div>
</div>
</div>
);
}
我们将这个组件定义为功能性的，因为它不需要处理状态。它是一个卡片组件，我们将在屏幕上显示。
创建一个类组件
我们已经创建了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) => (
<HotelCard key={i} />
));
}
addHotelRoom() {
const hotels = this.state.hotels;
hotels.push(1);
this.setState({
hotels
});
}
render() {
return (
<section>
<div className="row">
<div className="col-md-3">
<h2 className='page-title'>Hotel Rooms</h2>
</div>
<div className="col-md-6">
<button onClick={() => { this.addHotelRoom() }} className="btn btn-dark">Add Room</button>
</div>
</div>
<div className='row'>
{this.renderHotels()}
</div>
</section>
)
}
}
让我在这里解释一下这段代码。
首先，我们已经导入了React和HotelCard组件。
然后我们定义了一个构造函数。当你定义构造函数时，你需要写super()函数，因为组件类扩展了反应库的Component类。如果你不写super()函数，你会得到错误。
接下来的语句是setState()函数。
React组件可以，而且经常有一个状态。这个状态可以是任何东西。
setState() 函数是初始状态设置后更新状态的唯一合法方式。
在setState()函数中，我们已经初始化了酒店 数组， 它有1、1、1个元素。
这里，数组有硬编码的值，但在现实生活中，数组有来自网络表单的用户定义的值。
然后，我们定义了两个函数。
renderHotels()
这个函数返回HotelCard组件。此外，该函数根据酒店数组的长度返回卡片的数量。
所以，renderHotels() 函数渲染了酒店列表。
addHotelRoom()
**addHotelRoom()**函数修改了状态，并在酒店数组中增加了一个元素。如果用户点击按钮，那么1个项目将被推入数组，然后render()函数将再次渲染并显示多一个HotelCard。
最后一个函数是render()函数。render()函数返回一个JSX。如果该类的状态被改变，那么render()函数将根据修改后的状态重新渲染并显示数据。
因此，当页面被刷新时，它将初始化状态并调用render()函数。
根据状态中的可用数据，render()函数返回JJSX。
最后一步是将HotelList.js组件导入App.js组件内.
// App.js
import React from 'react';
import { HotelList } from './components/HotelList';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div className="container">
<HotelList />
</div>
);
}
export default App;
保存该文件，并使用以下命令启动React开发服务器。
yarn start
请看输出结果。
这就是如何在React.js中添加和显示数据的方法。
