react-jsonschema-form 表单 label 同一行显示

React-jsonschema-form允许自定义表单组件，包括label的位置。要让label与输入字段在同一行显示，你可以使用`Form`组件的`customFieldComponents`选项，以及自定义一个展示label和input的`Field`组件。

**示例**:

import React from "react";
import { Form, registerCustomValidator } from "react-jsonschema-form";

// 自定义 Field 组件，使 label 和 input 在同一行
const CustomField = ({ schema, meta, parent, formState, id, ...rest }) => {
  const { required, title } = schema.properties || {};

  return (
    <div>
      {title && <label htmlFor={id}>{title}</label>}
      <input {...rest} id={id} />
    </div>
  );
};

// 注册自定义 Field
registerCustomValidator("required", (value) => Boolean(value));

<Form
  schema={yourSchema}
  customFieldComponents={{ Field: CustomField }}
/>

在这个例子中，`CustomField`组件接收schema信息并使用`title`属性作为label。这样，当渲染表单时，每个字段的标题就会直接放在其对应的输入框上方，形成同一行显示的效果。