首页 > 解决方案 > google.books.load() 未定义。在 html 中包含 books/jsapi.js 文件

问题描述

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const Books = () => {
    let google = window.google;
    return (
        <div id="map" style={{ height: "500px" }}>
        {google.books.load()}
        {google.books.setOnLoadCallback(function initialize() {
            let viewer = new google.books.DefaultViewer(
            document.getElementById("map")
            );
        viewer.load("ISBN:1491918039");
        })}
    </div>
    );
};

class App extends React.Component {
    state = {
        show: false
    };

    showBook = () => {
        let val = this.state.show;
        this.setState({
            show: !val
        });
    };

    render() {
        let disp = null;
        if (this.state.show) {
            disp = <Books />;
        } else {
            disp = null;
        }
        return (
            <div className="App">
                <button onClick={this.showBook}>click me</button>
                {disp}
            </div>
        );
    }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

标签: reactjs

解决方案


推荐阅读