前端 - 灵异现象，jsx为什么传一个属性传不进去？

Question

核心代码如下，onlyDiscountFlag这个字段死活没传进去，试了一下改名字，叫onlyDiscount也不行，但是叫discountFlag却可以。这是什么意思？jsx不支持only开头的属性名称吗？

PS：检查过代码，整个文件没有其他地方用到onlyDiscountFlag，不存在修改值的情况，控制台还报错，提示没有传入onlyDiscountFlag这个属性。

            return (              <BillAddAndUpdate                ref="billAddAndUpdate"                key={this.$route.fullPath + row.id}                onlyDiscountFlag                discountInfoData={this.saveModel}              ></BillAddAndUpdate>            )

  props: {    // 表格分页使用的时候，支持外部传参    discountInfoData: {      type: Object,      default: () => {}    },    onlyDiscountFlag: {      type: Boolean,      default: false,      required:true    }  },

Answer 1

根据您提供的信息，问题可能出现在以下几个方面：

1. 属性名称不匹配：您提到，尝试将属性名称改为"onlyDiscount"或"discountFlag"，但这些名称并不匹配您的代码中的"onlyDiscountFlag"属性。这可能导致JSX解析器无法正确识别该属性。请确保您在代码中使用的属性名称与您的组件中定义的属性名称匹配。
2. 组件约束：根据您的描述，您的组件可能需要一些额外的约束，以允许属性名称为"onlyDiscountFlag"的传入。您可能需要在组件定义中添加类似以下的代码：

<BillAddAndUpdate  ref="billAddAndUpdate"  key={this.$route.fullPath + row.id}  onlyDiscountFlag={this.props.onlyDiscountFlag} // 注意此处是组件定义的传入，而不是在jsx中调用的调用方式  discountInfoData={this.saveModel}></BillAddAndUpdate>

这样，您在组件中定义了一个名为"onlyDiscountFlag"的属性，并且将它的值从父组件的props中传递给这个组件。在JSX调用时，不需要指定"onlyDiscountFlag"这个属性，因为它已经被传递了。

3. 控制台错误提示：如果您在控制台看到"未传入onlyDiscountFlag这个属性"的错误提示，这可能是因为您的代码存在语法错误或其他问题，导致该属性未被正确设置。请仔细检查您的代码，确保没有任何语法错误或拼写错误。