时间戳

首页 > 解决方案 > react-jsonschema-form 的多列支持

reactjs - react-jsonschema-form 的多列支持

问题描述

是否有可能使用 https://github.com/rjsf-team/react-jsonschema-form创建多列表单

我正在使用材质ui。

标签： reactjsmaterial-uireact-jsonschema-forms

解决方案

我找到了一个不是我喜欢的解决方案：

   const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
    return (
        <div>
            {props.title}
            {props.description}
            {props.properties.map(element => {
                return <div className="property-wrapper">{element.content}</div>
            })}
        </div>
    );
}
 <Form ObjectFieldTemplate={ObjectFieldTemplate}>

调查了几个小时的谷歌搜索，我找到了另一个解决方案：

const uiSchema = {
    "email": {
        "ui:widget": "email",
        'ui:column': 'xs6'
    },
    "password": {
        "ui:widget": "password",
        'ui:column': 'xs6'
    }
};

这里的问题： ui:coumn: xs6 仅适用于引导主题。因为我使用的是材料 ui，所以不能使用这种方法，或者我错过了一些东西来让它运行。

对于更多或更好的解决方案，我真的很喜欢

推荐阅读