Formio UI не отображается правильно с ReactDOM - PullRequest
Новая
       58

Formio UI не отображается правильно с ReactDOM

0 голосов
/ 03 апреля 2020

Я новичок, чтобы реагировать, и я учусь использовать хуки, но я не могу заставить плагин Formio правильно работать с компонентом.

Я не уверен, как реагировать. 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.

Любой совет поможет!

1 Ответ

0 голосов
/ 04 апреля 2020

Так что их документация была не очень понятной, но React.DOM не нужен. Был только css импорт, который мне пришлось добавить в индекс. html file.

Так что это работает! 

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