IdToName

前端 react 展示

Created At : 2024-07-20 15:48

Views 👀 :

react前端遇到一些展示问题(汇总)

react前端遇到一些展示问题(汇总)

id转化为Name

应用场景:

前端在遇到后端提供的一些接口的时候, 经常遇到只能查询一个id的情况, 比如查询知识库系统的时候, 一般需要展示对应的知识文件的其他情况, 比如作者是谁, 但是通常后端的接口只能拿到一个userId, 如果想要直接展示, 可能需要进行二次申请, 在react里面不太好弄

解决方案为: 新建一个组件, 将userID作为该组件的参数/props传入进去, 在这个组件内部进行ID号码的再一次请求, 然后将组件展示在原本需要展示用户名字的地方

如下所示的情况, 比如

1 2	<div> {item.userId} </div> 这种情况下想要展示用户姓名就可以使用这种格式

举例, 首先创建一个组件

function UserName(data) {
  const [name,setName]=useState('')
  useEffect(()=>{
    axios.get('/user/getUserById', {
        params: {
          userId:data.ID
        }
      })
      .then(response => {
        console.log(response.data)
        setName(response.data.data.username)
      })
      .catch(error => {
        // 处理请求错误
        console.error(error);
      });
  },[])
  return (
    <>
    {name}
    </>
  )
;
}

export default UserName;

用这种方法进行展示, 就可以改为

1
2
3

<div>
    <UserName ID={userID}/>
</div?>

不同文件的展示

(1)静态文件的展示

对于一些内置的文件, 比如说明, 可以使用这种方法

使用iframe标签直接展示对应的资源即可, 展示office家的东西可能有点困难, 这个标签用来展示一些视频, 图片, pdf等等还是可以的

但是要注意一点, 静态文件不能乱放, 要放在public里面, 并且直接使用'/'开头就可以直接访问public文件夹的内容了, 不需要设置绝对路径和相对路径

这个和webpack的打包机制是一样的, 所以vue也适用于这一点

(2)动态文件的展示

关于跨组件的信息交互

并列组件之间传递消息

第一种方法, 在两个并列的组件之间传递消息, 比如在一个组件上进行点击, 另一个组件上展示事件, 这种情况最好的就是在两个组件的公共父组件上设置一个状态

const [msg,setMsg]=useState(false)

在组件a中, 用props传递msg作为展示
在组件b中, 使用props传递setMsg函数

全局状态

这样子就可以实现在一个组件上进行操作, 来影响另一个组件上的展示了

第二种方法, 使用provide和context来实现, 将一些组件设置为全局

首先创建一个context对象
然后使用context创建一个组件, 如图所示的形式, 注意context对象也要导出
然后用这个组件作为跟组件的包裹, 在app.js上进行包裹

随后使用value关键字, 将需要传递的东西以对象的形式传递下去

import { createContext, useState } from 'react';

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
    //鉴权状态
    const [isLoggedIn, setIsLoggedIn] = useState(false);
  
    return (
      <AuthContext.Provider value={{isLoggedIn,setIsLoggedIn}}>
        {children} 
      </AuthContext.Provider>
    );
  };

使用方法:

引入context对象, 并且保证跟组件被provider包裹
使用useContext函数和解构语法获得对应的内容
1
2
const { isLoggedIn,login, logout } = useContext(AuthContext);
#### 父子组件传递消息

直接使用props即可

路由守卫

react原生里面没有这个玩意, 用法是创建一个路由守卫组件, 在跳转路由的时候, 包裹住真正的路由组件

这样, 在跳转的时候, 会先加载外面的路由守卫组件, 路由守卫组件内部再进行判断, 是正常跳转到目标组件, 还是跳转到别的路由

举例, 使用一个登录状态检测, 将目标路由的组件作为参数传递进来

const Protector = ({Component}) => { 

  const { isLoggedIn } = useContext(AuthContext); //通过全局状态时刻获取到登录状态
  return (
        //要么加载参数组件, 要么跳转到其他路由
        username ?  <Component/> :  <Navigate to={{ pathname: '/login' }} />
  );
};

在路由中是这样的

function App() {
  return (
    <AuthProvider>
      <BrowserRouter>
        <Routes>
          <Route path='/login' element={<User/>} />
          <Route path='/Sign' element={<Sign/>} />
          <Route path='/Test' element={<Test/>} />
          //将Home作为组件参数, props中
          //上面的守卫组件内部还实现了参数的解引用
          //不需要在props.Component了
          <Route path='/' element={<Protector Component={()=><Home/>}/>} />
        </Routes>
      </BrowserRouter>
    </AuthProvider>
  );
}

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 xranudvilas@gmail.com