如何将 ReactJS 应用程序与 Wagtail API 集成。要遵循的步骤？ [关闭]答案

【问题标题】：How to integrate ReactJS application with Wagtail API. Steps to follow? [closed]如何将 ReactJS 应用程序与 Wagtail API 集成。要遵循的步骤？ [关闭]
【发布时间】：2020-10-08 19:52:52
【问题描述】：

我正在尝试在 ReactJS 中编写应用程序，后端将使用 Wagtail API。我正在尝试找出在前端以及后端需要完成哪些所有步骤/所有配置才能将 ReactJS 与 Wagtail 集成？

【问题讨论】：

标签： javascript reactjs wagtail web-frontend wagtail-apiv2

【解决方案1】：

您使用哪个后端并不重要。你只需要在 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>

【讨论】：