能否在React项目中使用非React类npm包？以zipcodes包为例

Absolutely! You can absolutely use the zipcodes package in your React application—even as someone who’s only worked with React class components so far, this is totally doable with zero extra complexity. It’s a vanilla JavaScript utility package, so it plays nicely with React out of the box.

Let me walk you through the basic steps to get started:

1. Install the package #

First, add it to your project via npm or yarn:

npm install zipcodes
# or
yarn add zipcodes

2. Use it in your React component #

Since you’re familiar with React class components, here’s a simple example of how to integrate zipcodes for a ZIP code lookup tool:

import React, { Component } from 'react';
import zipcodes from 'zipcodes';

class ZipCodeLookup extends Component {
  state = {
    zipCode: '',
    location: null,
    error: ''
  };

  handleInputChange = (e) => {
    this.setState({ 
      zipCode: e.target.value,
      error: '',
      location: null
    });
  };

  handleLookup = () => {
    const { zipCode } = this.state;
    const locationData = zipcodes.lookup(zipCode);

    if (locationData) {
      this.setState({ location: locationData });
    } else {
      this.setState({ error: 'Sorry, that ZIP code isn\'t valid or couldn\'t be found.' });
    }
  };

  render() {
    const { zipCode, location, error } = this.state;
    return (
      <div style={{ padding: '2rem' }}>
        <h2>ZIP Code Lookup</h2>
        <input
          type="text"
          value={zipCode}
          onChange={this.handleInputChange}
          placeholder="Enter a 5-digit ZIP code"
          style={{ padding: '0.5rem', marginRight: '0.5rem' }}
        />
        <button onClick={this.handleLookup} style={{ padding: '0.5rem 1rem' }}>
          Get Location
        </button>

        {error && <p style={{ color: 'red', marginTop: '1rem' }}>{error}</p>}
        
        {location && (
          <div style={{ marginTop: '1rem' }}>
            <h3>Found Location:</h3>
            <p><strong>City:</strong> {location.city}</p>
            <p><strong>State:</strong> {location.state}</p>
            <p><strong>Latitude:</strong> {location.latitude}</p>
            <p><strong>Longitude:</strong> {location.longitude}</p>
          </div>
        )}
      </div>
    );
  }
}

export default ZipCodeLookup;

If you ever move to functional components later, the process is almost identical—you’ll just use useState instead of class state, like this:

import React, { useState } from 'react';
import zipcodes from 'zipcodes';

function ZipCodeLookup() {
  const [zipCode, setZipCode] = useState('');
  const [location, setLocation] = useState(null);
  const [error, setError] = useState('');

  const handleLookup = () => {
    const locationData = zipcodes.lookup(zipCode);
    if (locationData) {
      setLocation(locationData);
      setError('');
    } else {
      setError('Sorry, that ZIP code isn\'t valid or couldn\'t be found.');
      setLocation(null);
    }
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h2>ZIP Code Lookup</h2>
      <input
        type="text"
        value={zipCode}
        onChange={(e) => setZipCode(e.target.value)}
        placeholder="Enter a 5-digit ZIP code"
        style={{ padding: '0.5rem', marginRight: '0.5rem' }}
      />
      <button onClick={handleLookup} style={{ padding: '0.5rem 1rem' }}>
        Get Location
      </button>

      {error && <p style={{ color: 'red', marginTop: '1rem' }}>{error}</p>}
      
      {location && (
        <div style={{ marginTop: '1rem' }}>
          <h3>Found Location:</h3>
          <p><strong>City:</strong> {location.city}</p>
          <p><strong>State:</strong> {location.state}</p>
        </div>
      )}
    </div>
  );
}

export default ZipCodeLookup;

A quick note: #

The zipcodes package doesn’t require any React-specific setup—it’s just a collection of utility functions. You can call its methods (like lookup, radius, etc.) anywhere in your component logic, whether that’s in event handlers, lifecycle methods (for class components), or even inside useEffect hooks for functional components.

内容的提问来源于stack exchange，提问作者Jeff Winkler