如何将ReactJS应用程序与Wagtail API集成要遵循的步骤？

问题描述

我正在尝试在ReactJS中编写应用程序，后端将使用Wagtail API。 我试图找出将ReactJS与Wagtail集成在一起的前端以及后端需要完成的所有步骤/全部配置是什么？

解决方法

使用哪个后端都没有关系。您只需要从React中的API调用服务即可。

小例子：

文件 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from "./App";

export class ReactApp {
    static renderService(props,element) {
        ReactDOM.render(<App {...props}/>,element);
    }
}

window.ReactApp = ReactApp;

文件 App.js

import React from 'react';

class App extends React.PureComponent {

    constructor(props) {
        super(props);

        this.state = {
            data: null,inProgress: false
        }
    }

    async fetchData(url) {
        return await fetch(url)
            .then((response) => response.json())
            .then(data => this.setState({data}))
            .finally((e) => {
                this.setState({inProgress: false})
            });
    }

    componentDidMount() {
        this.fetchData(this.props.url);
    }


    render() {
        const {data,inProgress} = this.state;

        return (
            <div className="app">
                {
                    !inProgress && data &&
                    (
                        <div className="app__list">
                            {
                                data.map(item => <span className="app__list-item">{item.title}</span>)
                            }
                        </div>
                    )
                }
            </div>

        );
    }
}

export default App;

然后使用带有index.js入口点的webpack构建您的js代码，并在您的html中调用

<div id="app"></div>
<script  type="text/javascript" src="build.js"></script>
<script>
    ReactApp. renderService({url: 'https://yourApiUrl'},document.getElementById('app'));
</script>