【React工作记录五十二】react对数组进行展开显示

简介: 【React工作记录五十二】react对数组进行展开显示

导语

如何让对react中得数据进行展开显示操作




编辑

需求

数组超过两个就进行展开得操作


核心代码

render: (text, row, index) => {
          return (
            <span>
              {text.length > 2 && typeof text != 'string' ? (
                row.isExpand ? (
                  <div>{text.toString()}</div>
                ) : (
                  <div>
                    {text.slice(0, 2).toString()}
                    <span>等</span>
                    <a
                      style={{ zIndex: '100' }}
                      onClick={() => this.props.onExpandLectureName(row, index)}
                    >
                      {text.length}
                    </a>
                    <span>人</span>
                  </div>
                )
              ) : (
                text.toString()
              )}
            </span>
          );
        },

总结

由于text得值可能是数组和字符串  所以切换得时候如果大于2就显示成等几人 当是字符串得时候只有一个 所以不用在做展开处理 该代码来源于实际项目 微信公众号关注前端小歌谣一起学习前端知识

相关文章
|
7月前
|
JSON JavaScript 前端开发
前端 ex2json 用于 vue/react/js 将 xls、xlsx、csv 文件转成 json 数组
前端 ex2json 用于 vue/react/js 将 xls、xlsx、csv 文件转成 json 数组
177 0
|
前端开发 JavaScript
react 数组下标来作为 react组件中的key
react 数组下标来作为 react组件中的key
128 0
|
7月前
|
前端开发 JavaScript
react中的useState为什么是一个数组,而不是一个对象?
react中的useState为什么是一个数组,而不是一个对象?
154 0
|
前端开发
React基础语法04-循环数组渲染数据的方法
React基础语法04-循环数组渲染数据的方法
140 0
|
前端开发
react对数组进行展开显示
react对数组进行展开显示
79 0
|
前端开发 数据处理
react中filter数组的使用
react中filter数组的使用
104 0
|
前端开发
react如何在数组中手动添加一个对象
react如何在数组中手动添加一个对象
206 0
|
前端开发 数据处理
【React工作记录四十四】react中filter数组的使用
【React工作记录四十四】react中filter数组的使用
276 0
|
前端开发
【React工作记录五十四】形成新数组的方式扩展运算符
【React工作记录五十四】形成新数组的方式扩展运算符
59 0
|
前端开发
【React工作记录五十九】根据key值过滤形成新得数组
【React工作记录五十九】根据key值过滤形成新得数组
84 0