如何在 ReactJS 中构建 IP 地址查找器应用程序？

IP 地址查找器是一种帮助用户快速确定 IP 地址所属地理位置的应用程序。在本文中，我们将介绍如何使用 ReactJS 构建这样的应用程序。

项目结构

首先，让我们创建一个名为 ip-lookup 的新项目，并在 src 目录下创建以下文件：

src/
  App.js
  SearchBar.js
  Results.js

其中，App.js 是我们的主应用程序组件，SearchBar.js 是搜索栏组件，Results.js 是结果列表组件。

SearchBar.js

我们从 SearchBar.js 开始。打开该文件并输入以下代码：

import React from 'react';

class SearchBar extends React.Component {
  render() {
    return (
      <form>
        <input type="text" placeholder="Enter IP address" />
        <button type="submit">Search</button>
      </form>
    );
  }
}

export default SearchBar;

在这个代码中，我们创建了一个 SearchBar 类组件，该组件包含一个表示 IP 地址的文本输入和一个搜索按钮。

Results.js

接下来，让我们编写 Results.js 组件，用于显示搜索结果。在该文件中输入以下代码：

import React from 'react';

class Results extends React.Component {
  render() {
    const { location, ip, isp } = this.props;
    return (
      <div>
        <h2>IP Lookup Results</h2>
        {location && <p>Location: {location}</p>}
        {ip && <p>IP Address: {ip}</p>}
        {isp && <p>ISP: {isp}</p>}
      </div>
    );
  }
}

export default Results;

在这个代码中，我们创建了一个 Results 类组件，该组件根据传递给它的属性显示搜索结果。

App.js

最后，让我们构建 App.js 组件，该组件将集成 SearchBar 组件、Results 组件以及与 IP 地址查找器 API 通信的逻辑。

在该文件中输入以下代码：

import React from 'react';
import SearchBar from './SearchBar';
import Results from './Results';

const API_URL = 'http://ip-api.com/json';

class App extends React.Component {
  state = {
    location: '',
    ip: '',
    isp: '',
    error: ''
  };

  handleSearch = e => {
    e.preventDefault();
    const ip = e.target.elements.ip.value.trim();
    if (ip) {
      fetch(`${API_URL}/${ip}`)
        .then(res => res.json())
        .then(data => {
          if (data.status === 'success') {
            this.setState({
              location: `${data.city}, ${data.regionName}, ${data.countryCode}`,
              ip: data.query,
              isp: data.isp,
              error: ''
            });
          } else {
            this.setState({
              error: data.message,
              location: '',
              ip: '',
              isp: ''
            });
          }
        })
        .catch(error => console.log(error));
    }
  };

  render() {
    const { location, ip, isp, error } = this.state;
    return (
      <div>
        <h1>IP Lookup</h1>
        <SearchBar handleSearch={this.handleSearch} />
        {error && <p>Error: {error}</p>}
        {!error && <Results location={location} ip={ip} isp={isp} />}
      </div>
    );
  }
}

export default App;

在这个代码中，我们创建了 App 类组件，该组件包含一个状态对象来存储搜索结果、错误以及与 API 通信的逻辑。我们使用 fetch 函数来获取来自 IP 地址查找器 API 的数据，并根据状态更新搜索结果或显示错误消息。

集成所有组件

现在，我们已经编写了所有组件并完成了与 API 通信的逻辑，接下来我们需要将所有组件集成到一起。

在 index.js 文件中输入以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

在这个代码中，我们将 App 组件渲染到 root DOM 元素中。

运行应用程序

现在，让我们通过运行以下命令来启动应用程序：

npm start

这将在浏览器中打开我们的 IP 地址查找器应用程序，并使其可以在本地主机上运行。您可以尝试在搜索栏中输入有效的 IP 地址，并查看您的应用程序是否能够显示正确的搜索结果。

至此,我们已经成功使用 ReactJS 构建了一个简单的 IP 地址查找器应用程序，包括 SearchBar 组件、Results 组件以及用于与 IP 地址查找器 API 通信的 App 组件。希望这篇文章能够帮助您在 ReactJS 中构建更多有用的应用程序。