如何让React Awesome Query Builder显示嵌套字段完整路径

有两种简单的方式可以实现将嵌套字段（如User下的firstName、login）显示为User.firstName、User.login格式：

1. 直接在字段配置中指定label #

在定义字段结构时，为嵌套的子字段显式设置label属性，直接写入带父字段前缀的名称：

const fields = {
  User: {
    label: "User",
    type: "group",
    fields: {
      firstName: {
        label: "User.firstName",
        type: "text",
      },
      login: {
        label: "User.login",
        type: "text",
      }
    }
  }
};

2. 全局自定义字段标签格式化逻辑 #

如果有大量嵌套字段，不想逐个设置label，可以通过库的formatFieldLabel配置项统一处理：

// 自定义标签格式化函数
const customFormatFieldLabel = (field, path) => {
  // path参数是字段的完整层级数组，比如firstName对应的path为['User', 'firstName']
  return path.join('.');
};

// 传入QueryBuilder的配置
const config = {
  // 其他配置项...
  formatFieldLabel: customFormatFieldLabel
};

然后在组件中使用这个配置：

<QueryBuilder
  fields={fields}
  config={config}
  // 其他必要props（如value、onChange等）
/>

这两种方式都能让嵌套字段在查询构建器中显示为父字段.子字段的格式，根据你的字段数量选择合适的方法即可。

内容的提问来源于stack exchange，提问作者Aaron