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

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

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

Неперехваченная ошибка: целевой контейнер не является элементом DOM.

Моя установка:

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

Мой пакетный файл отображает компоненты:

приложение/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);
});

Затем я отдельные файлы:

приложение/javascript/Botanicals/index.jsx

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

export default Botanicals

приложение/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

приложение/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

приложение/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

представления/ботаники/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.

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


ruby-on-rails webpack reactjs javascript webpacker
person Simon Cooper    schedule 24.01.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

person chen ginat    schedule 25.01.2019