开发集成

classnames

classnames 是一个用于条件地合并类名的 JavaScript 库。它允许你根据条件动态地添加或移除 CSS 类名，使得在 React 组件中处理样式变得更加灵活和简洁。

安装

npm i classnames

示例

classNames('foo', 'bar') // => 'foo bar'
classNames('foo', { bar: true }) // => 'foo bar'
classNames({ 'foo-bar': true }) // => 'foo-bar'
classNames({ 'foo-bar': false }) // => ''
classNames({ foo: true }, { bar: true }) // => 'foo bar'
classNames({ foo: true, bar: true }) // => 'foo bar'

// 多种类型参数混合
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }) // => 'foo bar baz quux'

// 其他假值会被忽略
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, '') // => 'bar 1'

// 数组会按照上述规则递归展开
const arr = ['b', { c: true, d: false }]
classNames('a', arr) // => 'a b c'

react-error-boundary

react-error-boundary 是一个用于处理 React 组件错误边界的库。它提供了一种简便的方法来捕获组件树中的错误，并显示备用 UI，而不会破坏整个应用程序。

安装

npm i react-error-boundary

示例

import { ErrorBoundary } from 'react-error-boundary'

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )
}

function BuggyComponent() {
  throw new Error('I crashed!')
}

function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => {}}>
      <BuggyComponent />
    </ErrorBoundary>
  )
}

swr

SWR 是一个用于数据获取的 React Hooks 库。它提供了简单且高效的方式来获取、缓存和更新数据，支持自动重新验证和本地缓存。

安装

npm i swr

示例

import useSWR from 'swr'

const fetcher = (url) => fetch(url).then((res) => res.json())

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>

  return <div>Hello {data.name}!</div>
}