react forms
v4.0.0
数据驱动的表单是一种基于React最终形式的提供许多提供的功能的React库，用于渲染和管理形式。
❓为什么要使用数据驱动的表格？ ❓
？特征 ？
有关更多信息，请访问文档。
目录
$ npm install @data-driven-forms/react-form-renderer -S $ yarn add @data-driven-forms/react-form-renderer $ npm install @data-driven-forms/mui-component-mapper -S $ yarn add @data-driven-forms/mui-component-mapper$ npm install @data-driven-forms/pf4-component-mapper -S $ yarn add @data-driven-forms/pf4-component-mapper$ npm install @data-driven-forms/blueprint-component-mapper -S $ yarn add @data-driven-forms/blueprint-component-mapper$ npm install @data-driven-forms/suir-component-mapper -S $ yarn add @data-driven-forms/suir-component-mapper$ npm install @data-driven-forms/ant-component-mapper -S $ yarn add @data-driven-forms/ant-component-mapper$ npm install @data-driven-forms/carbon-component-mapper -S $ yarn add @data-driven-forms/carbon-component-mapper映射器中的组件库是外部依赖项。确保将它们及其样式安装在捆绑包中。
提供的数据驱动形式支持的映射器包含以下组件集：
任何其他组件都可以通过表单渲染器添加到映射器和渲染器中。现有的组件也可以被过度。
为了使组件中的数据驱动表单您需要渲染器和组件映射器，该映射器提供组件映射器和表单模板。
import React from 'react' ;
import { FormRenderer , componentTypes } from '@data-driven-forms/react-form-renderer' ;
import { componentMapper , FormTemplate } from '@data-driven-forms/pf4-component-mapper' ;
const schema = {
fields : [ {
component : componentTypes . TEXT_FIELD ,
name : 'name' ,
label : 'Your name'
} ]
}
const Form = ( ) => (
< FormRenderer
schema = { schema }
componentMapper = { componentMapper }
FormTemplate = { FormTemplate }
onSubmit = { console . log }
/>
) 您也可以使用自定义映射器。
import React from 'react' ;
import { FormRenderer , componentTypes , useFieldApi } from '@data-driven-forms/react-form-renderer' ;
const TextField = props => {
const { label , input , meta , ... rest } = useFieldApi ( props )
return (
< div >
< label htmlForm = { input . name } > { label } </ label >
< input { ... input } { ... rest } id = { input . name } />
{ meta . error && < p > { meta . error } </ p > }
</ div >
)
}
const componentMapper = {
[ componentTypes . TEXT_FIELD ] : TextField ,
'custom-type' : TextField
}
const schema = {
fields : [ {
component : componentTypes . TEXT_FIELD ,
name : 'name' ,
label : 'Your name'
type : 'search' ,
} ]
}有关更多信息，请检查此页面。
也可以使用yarn generate-template命令生成映射器。
请使用我们的文档网站。如果有任何问题，您可以直接在GitHub中访问文档文件。
数据驱动的表单是使用Lerna和纱线工作区的MonorePo，因此您也可以使用其所有命令。
○nodejs 16
○UNIX喜欢OS（MacOS，Linux）
目前，我们不支持在Windows上开发。但是，我们欢迎任何PR改变这一点。
yarn installyarn build默认情况下，所有软件包都链接在一起，因此，如果您在软件包中运行yarn build ，则所有其他软件包都将更新到该软件包的最新版本。在其他软件包中使用之前，必须首先构建软件包。
每个软件包都有一个小的操场package/demo ，您可以在其中测试更改。
cd packages/pf3-component-mapper
yarn start该文档是基于NextJS框架的服务器端渲染的React应用程序。
cd packages/react-renderer-demo
yarn devyarn lerna clean
rm -rf node_modules要清洁构建的文件使用以下命令：（此脚本在每个构建之前也自动运行。）
yarn clean-build可以从核心文件夹或特定软件包进行测试。
yarn test
yarn test --watchAll packages/pf4-component-mapper
# or
cd packages/pf4-component-mapper
yarn test 如果您要打开PR，请关注以下清单。它将帮助您完成公关。
在根文件夹中运行yarn build以构建所有软件包。您只能在更改的软件包中运行此命令。默认情况下，所有软件包都链接，您必须先构建它们。
在Root文件夹中运行yarn lint以检查代码是否正确格式。您可以使用yarn lint --fix来自动纠正问题。
所有新代码均应进行适当的测试。在根文件夹中运行yarn test以测试所有文件。检查CodeCoverage报告以查看未覆盖的代码行。我们正在使用开玩笑和React测试库。
如果您引入了一个新功能，则应在我们的文档中记录此更改。该文档位于react-renderer-demo软件包中，它是基于NextJS的Web应用程序。我们不为文档编写测试。
yarn dev启动了文档的本地版本。
yarn build准备部署文件。
yarn serve会模拟在本地模拟器中运行的Web应用程序。
正确的提交消息很重要，因为我们正在使用语义释放自动与新版本相关。这些消息也在我们的发行说明中使用，因此其他用户可以看到正在更改的内容。
我的更改介绍了一个新功能
将您的提交消息带有feat前缀，并指定正在更改的软件包。一个示例： feat(pf4): a new dual list integration 。如果更改多个软件包，则可以使用feat(common): ...或feat(all): ...
我的更改解决了错误或技术债务
将您的提交消息带有fix 。否则，适用相同的规则。一个示例： fix(pf4): fixed missed proptype in select 。
我的更改不会更改任何发布的软件包
如果您的更改没有更改任何已发布的软件包，则可以简单地简单地介绍更改，一个示例： Fix button on documenation example page 。这也适用于文档存储库中的任何更改。
我的更改引入了破坏的变化
我们正在努力避免破坏变化。请打开一个问题并与我们讨论这个问题，我们将尝试提出其他选择。
我们欢迎任何社区贡献。不要害怕报告错误或创建问题和抽签！ ？
Apache许可证2.0
