React 点击删除列表中对应项（React 获取DOM中自定义属性）

要实现点击删除列表中对应项的功能，可以首先在列表项中添加一个自定义属性，用于标识该项的唯一性。例如，可以给每个列表项添加一个id属性：

<ul>
  {list.map(item => (
    <li key={item.id} data-id={item.id} onClick={handleDelete}>
      {item.title}
    </li>
  ))}
</ul>

在点击事件中，可以通过event.target获取到被点击的元素，从而获取到该元素的自定义属性值。代码示例如下：

function handleDelete(event) {
  const id = event.target.getAttribute('data-id');
  // 根据id删除对应的列表项
}

然后，根据获取到的id值，可以执行删除操作。具体实现方式根据具体情况而定，可以使用React的状态管理工具（如useState、useReducer等）来管理列表数据，并在删除时更新状态。

相关问题

react-router-dom中lazy

React Router Dom中的`lazy`函数是用于实现路由懒加载的功能。懒加载是一种优化技术，它可以延迟加载某个组件，只有在需要的时候才进行加载，而不是一开始就加载所有的组件。

使用`lazy`函数，你可以将一个组件包装起来，并通过动态导入的方式进行加载。例如，你可以这样使用`lazy`函数：

import { lazy } from 'react';
import { Switch, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));

function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Switch>
  );
}

在上面的例子中，我们通过`lazy`函数将`Home`、`About`和`Contact`组件进行了懒加载。当访问对应的路由时，才会进行相应组件的加载。

需要注意的是，懒加载需要和`Suspense`组件一起使用，以处理在组件加载过程中的等待状态。你可以在代码中添加一个`Suspense`组件来包裹你的路由组件：

import { Suspense } from 'react';

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Suspense>
  );
}

在上面的例子中，我们定义了一个`fallback`属性，用于在组件加载过程中显示一个加载中的状态。你可以根据需要自定义这个状态。

这就是在React Router Dom中使用`lazy`函数进行路由懒加载的基本用法。通过懒加载，可以提高应用程序的性能和加载速度，特别是当应用程序包含大量组件时。

react中怎么实现登录拦截

在 React 中实现登录拦截可以通过路由守卫来实现。具体步骤如下：

1. 安装 react-router-dom：`npm install react-router-dom`

2. 在 App.js 中引入 react-router-dom，并定义需要登录才能访问的路由：

   import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
   
   const PrivateRoute = ({ component: Component, ...rest }) => (
     <Route {...rest} render={(props) => (
       localStorage.getItem('isAuthenticated') === 'true'
         ? <Component {...props} />
         : <Redirect to='/login' />
     )} />
   )
   
   function App() {
     return (
       <Router>
         <Switch>
           <Route exact path="/login" component={Login} />
           <PrivateRoute exact path="/" component={Home} />
           <PrivateRoute exact path="/profile" component={Profile} />
         </Switch>
       </Router>
     );
   }

上面的代码中，PrivateRoute 是一个自定义组件，用于判断用户是否已经登录。如果已经登录，则渲染对应的组件；如果未登录，则重定向到登录页面。

3. 在登录成功后，将 isAuthenticated 存储到 localStorage 中：

   function handleLogin() {
     // 登录成功后将 isAuthenticated 存储到 localStorage 中
     localStorage.setItem('isAuthenticated', 'true');
     // 跳转到首页
     history.push('/');
   }

4. 在退出登录时，将 isAuthenticated 从 localStorage 中删除：

   function handleLogout() {
     // 退出登录时将 isAuthenticated 从 localStorage 中删除
     localStorage.removeItem('isAuthenticated');
     // 跳转到登录页面
     history.push('/login');
   }