前言

大家好，我是你不会困，写代码就不会困，今天分享的是总算体会到jsx写法为啥灵活

什么是jsx写法？

当谈到JavaScript中的JSX写法时，人们往往会想到React和Vue这样的流行前端框架。JSX作为一种在JavaScript中编写类似于HTML的语法，为前端开发者提供了更灵活和直观的方式来构建用户界面。

JSX的灵活性体现在多个方面。首先，JSX允许开发者在JavaScript中嵌入HTML标记，使得代码更易读和维护。通过使用JSX，开发者可以在同一个文件中编写JavaScript逻辑和界面布局，而无需频繁切换不同的文件。这种混合编程风格提高了开发效率，同时也方便了代码的组织和调试。

其次，JSX支持在标记中使用JavaScript表达式，这使得动态生成界面变得更加简单。开发者可以在JSX中直接使用JavaScript变量、函数调用和逻辑控制语句，从而动态地渲染页面内容。这种灵活性使得开发者能够根据不同的数据状态和条件来动态展示内容，提升了用户体验。

另外，JSX还支持在标记中使用循环和条件语句，比如map函数和条件渲染，从而实现列表展示、条件展示等常见的UI需求。这种功能使得开发者可以更方便地处理复杂的UI逻辑，同时简化了代码的编写和维护。

此外，JSX的组件化特性也为前端开发带来了很多好处。通过将UI拆分成独立的组件，开发者可以更好地组织和管理代码，提高代码的重用性和可维护性。JSX中的组件可以嵌套使用，形成复杂的UI结构，同时每个组件可以单独管理自己的状态和逻辑，使得代码更加清晰和可扩展。

今天在开发的时候发现，这两个即可开启总计列

show-summary
:summary-method="getSummaries"

但是产品的需求比较麻烦，需要渲染多行，查了相关的文档，好像没有这种渲染的demo，翻看项目的代码，有一部分代码的实现比较巧妙，使用的是jsx写法，然后就尝试着去实现

要在vue里面使用jsx写法，在script标签使用<script lang="jsx">，即可使用

getSummaries(param) {
      const { columns } = param
      const sums = []
      const nullHtml = '-'
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计'
          return
        }
        if (this.totalSum.summaryReceivableComparisons) {
          sums[index] = (
            <div>
              {this.totalSum.summaryReceivableComparisons.map((item) => (
                <div class='cell-item' key={item.invoiceCurrency}>
                  <p>
                    {this.formatValue(
                      item[column.property],
                      column.property.includes('Ratio')
                        ? 'percentage'
                        : 'thousandth'
                    )}
                  </p>
                </div>
              ))}
            </div>
          )
        } else {
          sums[index] = nullHtml
          return
        }
      })
      return sums
    },

上面的代码使用了map来遍历，将对应的html返回，el-table的总计列即可生效，来应对不同的需求

总结

总的来说，JSX作为JavaScript中的一种扩展语法，为前端开发带来了更灵活、直观和高效的开发体验。通过使用JSX，开发者可以更轻松地构建交互丰富、动态变化的用户界面，同时提高了代码的可读性和可维护性。JSX的灵活性和表现力使其成为现代前端开发中不可或缺的一部分。