使用ReactDOM时Formio UI无法正确显示

Question

我刚开始反应，正在学习使用钩子，但我似乎无法让Formio插件正确地与组件一起工作。

我不确定React.DOM将如何用钩子实现，但Formio的文档声明：

import React from 'react';
import ReactDOM from 'react-dom';
import {FormBuilder} from 'react-formio';
ReactDOM.render(
<FormBuilder form={{display: 'form'}} onChange={(schema) => console.log(schema)} />
, document.getElementById('builder')
);

我尝试在一个组件上实现，但ReactDOM一直给我一个错误。这段代码是有效的，但插件很不稳定，所以我知道有些地方工作不正常。

import React, { useState, useEffect } from "react";
import  ReactDOM from 'react-dom'; 
import { FormBuilder } from 'react-formio';
const FormBuilderPage = props => {
return (

<FormBuilder 
form={{ display: 'form' }}
onChange={(schema) => console.log(schema)}
/>
//,document.getElementById('builder')
)

// This returns an error     
return (

ReactDOM.render(
<FormBuilder form={{display: 'form'}} onChange={(schema)                => console.log(schema)} />
, document.getElementById('builder')
)
)

}
export default FormBuilderPage;

当我添加ReactDOM.render时，我得到错误：

Uncaught Error: Target container is not a DOM element.

任何建议都会有帮助！

Answer 1

所以他们的文档不是很清楚，但不需要React.DOM。只有一个css导入，我必须添加到index.html文件中。

所以这是有效的！

import React from "react";
import { FormBuilder } from 'react-formio';
const FormBuilderPage = props => {
return (

<FormBuilder 
form={{ display: 'form' }}
onChange={(schema) => console.log(schema)}
/>
) 
}
export default FormBuilderPage;

<!-- Formio CSS-->
<link
rel="stylesheet"
href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css"
/>