如何在react-jsonschema-form自定义组件中传递自定义props？

有两种常用方式可以给自定义Widget传递像dropdownType这类自定义属性：

方式一：直接在uiSchema中添加自定义属性 #

直接在字段的uiSchema配置里加入自定义属性，react-jsonschema-form会自动把这些属性传递给对应的Widget组件：

修改你的uiSchema.json：

"diplomas": {
  "ui:widget": "SelectField",
  "ui:label": false,
  "dropdownType": "arrow"
}

然后在你的自定义SelectField组件中，直接从props里接收该属性：

// 函数组件示例
const SelectField = ({ input, dropdownType, options, ...rest }) => {
  // 这里可以直接使用dropdownType的值
  console.log(dropdownType); // 输出 "arrow"
  
  return (
    <select {...input} className={`custom-dropdown ${dropdownType}`}>
      {options.map(({ label, value }) => (
        <option key={value} value={value}>
          {label}
        </option>
      ))}
    </select>
  );
};

方式二：通过ui:options包裹自定义属性 #

如果想把自定义属性和官方ui属性区分开，可以用ui:options字段来统一管理：

修改uiSchema.json：

"diplomas": {
  "ui:widget": "SelectField",
  "ui:label": false,
  "ui:options": {
    "dropdownType": "arrow"
  }
}

对应的组件中，从uiOptions属性里提取自定义值：

const SelectField = ({ input, uiOptions, options, ...rest }) => {
  const { dropdownType } = uiOptions;
  
  return (
    <select {...input} className={`custom-dropdown ${dropdownType}`}>
      {options.map(({ label, value }) => (
        <option key={value} value={value}>
          {label}
        </option>
      ))}
    </select>
  );
};

两种方式都能正常工作，推荐用第二种，因为它能让uiSchema的结构更清晰，避免自定义属性和官方ui字段冲突。

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