Formio UI 无法使用 ReactDOM 正确显示

Question

我是 React 新手，我正在学习使用钩子，但我似乎无法让 Formio 插件与组件一起正常工作。

我不确定 React.DOM 将如何用钩子实现，但是 Formio 的 docs 状态：

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"
    />

Formio UI 无法使用 ReactDOM 正确显示

Formio UI not displaying correctly with ReactDOM

reactjs

react-hooks

react-dom

formio