【React工作记录五十八】函数方式渲染页面

简介: 【React工作记录五十八】函数方式渲染页面

导语

根据key值过滤形成新得数组




编辑


核心实现代码

var arr = [{ key: '', value: '所有' }];
    orderStatusList &&
      orderStatusList.map((item) => {
        if (
          item.key == '1202011271718478888579391' ||
          item.key == '1202011271718328888637809' ||
          item.key == '1202011271718158888762334' ||
          item.key == '116345258629988888989281' ||
          item.key == '1202011271719298888433205' ||
          item.key == '1202011271718568888010433'
        )
          arr.push({
            key: item.key,
            value: item.value,
          });
      });

运行结果

image.png

相关文章
|
29天前
|
前端开发 JavaScript API
react挂载后函数
react挂载后函数
10 1
|
2月前
|
前端开发 JavaScript
在React中,如何通过事件处理函数来管理按钮的点击行为?
【5月更文挑战第28天】在React中,如何通过事件处理函数来管理按钮的点击行为?
28 1
|
2月前
|
前端开发 JavaScript
在React中,如何通过事件处理函数来管理输入框的获取和失去焦点行为?
【5月更文挑战第28天】在React中,如何通过事件处理函数来管理输入框的获取和失去焦点行为?
30 1
|
2月前
|
前端开发 JavaScript 算法
React渲染流程
应用的性能和灵活性,以后可以具体看一 Fiber 的工作原理。
22 3
|
28天前
|
前端开发 JavaScript
REACT 条件渲染
REACT 条件渲染
|
2月前
|
存储 前端开发 JavaScript
在回调函数中重新渲染React组件
在React中,重新渲染组件可通过`forceUpdate()`或`ReactDOM.render()`实现。方法一是使用`forceUpdate`强制无状态组件更新;方法二是通过重新创建根组件实例适用于有状态组件。这些示例基于Webpack和Babel的模块热替换配置。根据项目需求和React版本,还可以结合React-Router或Redux等库选择合适的方法。
|
2月前
|
存储 JSON 资源调度
next.js博客搭建_react-markdown渲染内容(第三步)
next.js博客搭建_react-markdown渲染内容(第三步)
19 1
|
2月前
|
数据采集 资源调度 前端开发
React的服务器端渲染:使用ReactDOMServer进行高效页面预渲染
【4月更文挑战第25天】使用ReactDOMServer,React支持服务器端渲染以实现高效预渲染。通过在Node.js环境中将React组件转化为HTML字符串,减少客户端JavaScript负载和渲染时间。优点包括更快首屏加载、改善SEO和兼容无JavaScript环境,但也会增加服务器负载、复杂性和状态管理挑战。开发者需根据项目需求平衡SSR和CSR。
|
2月前
|
前端开发 JavaScript 开发者
掌握React中的useEffect:函数组件中的魔法钩子
掌握React中的useEffect:函数组件中的魔法钩子
|
2月前
|
存储 前端开发 安全
深入理解React中的useState:函数组件状态管理的利器
深入理解React中的useState:函数组件状态管理的利器