Question

我试图通过一些ReactJS组件为Rails资源添加CRUD功能。我正在使用webpacker。

在此阶段，控制台中出现一个错误：

未捕获的错误：目标容器不是DOM元素。

我的设置是：

反应文件位于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。

我正在为没有更多错误消息而苦苦挣扎。

Answer 1

您应该将<% javascript_pack_tag %>放在div中，其ID与您在第一个React文件的getElementById中编写的ID相同。

这意味着您应该编写views / botanicals / index.html.erb

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

希望它对您有用

使用Webpacker在Rails应用中渲染ReactJS CRUD组件问题

1 个答案: