Ошибка рендеринга компонентов ReactJS CRUD в приложении Rails с помощью Webpacker - PullRequest
Новая
       8

Ошибка рендеринга компонентов ReactJS CRUD в приложении Rails с помощью Webpacker

0 голосов
/ 24 января 2019

Я пытаюсь добавить функциональность CRUD для ресурса Rails через некоторые компоненты ReactJS.Я использую webpacker.

На этом этапе я получаю одну ошибку в консоли:

Uncaught Ошибка: целевой контейнер не является элементом DOM.

Моя настройка:

Файлы React находятся в app/javascript/Botanicals.Затем у меня есть app/javascript/packs, где webpacker компилируется из в app/public/packs/manifest.json

В моем файле пакета отображаются компоненты:

app / javascript / packs / botanicalsCRUD.jsx 

import React from 'react'
import ReactDOM from 'react-dom'
import Botanicals from 'Botanicals'

document.addEventListener('turbolinks:load', function() {
    var element = document.getElementById("botanicals");
    ReactDOM.render(<Botanicals />, element);
});

Я тогда отдельные файлы:

app / javascript / Botanicals / index.jsx 

var Botanicals = React.createClass({
    render() {
        return (
            <div>
                <Body />
            </div>
        );
    }
});

export default Botanicals

app /javascript / Botanicals / body.js.jsx 

var Body = React.createClass({


    getInitialState(){
        return { botanicals: [] };
    },

    componentDidMount(){
        $.getJSON('/botanicals.json', (response) => { 
            this.setState({ botanicals: response }); 
        });
    },

    handleSubmit(item) {
        var newState = this.state.botanicals.concat(botanical);
        this.setState({ botanicals: newState })
    },

    handleDelete(id) {
        $.ajax({
            url: `/botanicals/%{id}`,
            type: 'DELETE',
            success: () => {
                this.removeItemClient(id);            
            }
        });
    },

    removeItemClient(id) {
        var newBotanicals = this.state.botanicals.filter((botanical) => {
            return botanical.id != id;
        });

        this.setState({ botanicals: newBotanicals });
    },

    render() {
        return (
            <div>
                <NewItem handleSubmit={this.handleSubmit} />
                <AllItems botanicals={this.state.botanicals} />
            </div>
        );
    }
});

export default Body

app / javascript / Botanicals / newitem.js.jsx 

var NewItem = React.createClass({

    handleClick() {
        var name = this.refs.name.value;
        var description = this.refs.description.value;
        $.ajax({
            url: "/botanicals",
            type: "POST",
            data: { botanical: { name: name, description: description } },
            success: botanical => {
                this.props.handleSubmit(botanical);
            }
        });
    },

    render() {
        return (
            <div>
                <input ref='name' placeholder='Enter the name of the item' />
                <input ref='description' placeholder='Enter a description' />
                <button onClick={this.handleClick}>Submit</button>
            </div>
        );
    }
});

export default NewItem

app / javascript / Botanicals / allitems.js.jsx 

var AllItems = React.createClass ({
    handleDelete(id) {
        this.props.handleDelete(id);
    },

    render() {
        var botanicals = this.props.botanicals.map((botanical) => {
        return (
            <div key={botanical.id}>
                <h3>{botanical.name}</h3>
                <p>{botanical.description}</p>
                <button onClick={this.handleDelete.bind(this, botanical.id)}>Delete</button>
            </div>
        );
    });

            return <div>{botanicals}</div>;
        }
    });

export default AllItems

views / botanicals / index.html.erb 

<% javascript_pack_tag 'botanicalsCRUD' %>

<h1>Botanicals</h1>

<div id="botanicals"></div>

BotanicalsCRUD находится вфайл manifest.json: 

 "botanicalsCRUD.js": "/packs/botanicalsCRUD-b8ea47dea15aa535c997.js",
  "botanicalsCRUD.js.map": "/packs/botanicalsCRUD-b8ea47dea15aa535c997.js.map",

Мое основное подозрение в том, что файл рендеринга в Packs неправильно находит botanicals/index.jsx.

Я борюсь с тем, что нетбольше сообщений об ошибках.

1 Ответ

0 голосов
/ 25 января 2019

вы должны поместить <% javascript_pack_tag %> в div с тем же идентификатором, который вы написали в getElementById вашего первого файла реакции.

, что означает в views / botanicals / index.html.erb, что вы должны написать

<div id="botanicals">
   <% javascript_pack_tag 'botanicalsCRUD' %>
</div>

надеюсь, что это сработает для вас

...