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
