如何将 bible.org 小部件添加到我的站点？

Question

我希望每个人都有美好的一天。 我正在使用 bible.org API 为圣经创建一个学习应用程序。

bible.org 提供了在您自己的网站上输入他们的小部件的选项。

当您完成创建小部件时，他们会为您提供以下信息：

将以下代码粘贴到您的网站或博客中。

BIBLESEARCH.widget({ “背景”：“FFFFFF”， “颜色”：“E2615C” });

我正在使用 Reactjs，并希望在我的 Header 组件中实现它。

我提供了我的 H 示例

import React from 'react';
import {startNewBookAction} from '../Actions/index';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

import {Link} from 'react-router-dom';
import axios from 'axios';
import {bibleBooks} from '../../data/bibleBooks';



class Header extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            book:"Genesis"
        };
    }//end of constructor

    handleNewBook() {
        let userBook = this.state.book;
        console.log('The book chosen by the user', this);
        this.props.startNewBookAction(userBook)


    }//handleNewBook


    handleLogout() {
        console.log('loging out..');
        axios.delete('/login').then(res => {
            console.log('back from the server with', res);
            window.location = "/?#/user";
        })
    }//end of handleLogout

    showBibleBooks() {
        //displays the option tag for every book in the bible
        console.log('showing the books');
        let books = bibleBooks;
        return(
                
                    books.map((b, id) => {
                        return (
                            <option value={b} key={id}>{b}</option>
                        );
                    })
        );//end of return
    }//end og showBibleBooks

    start() {
        console.log('start', this)
    }//end of start

   
    render() { 
        return (
            <div id="UserHeader">
                <header className="main-header">
                    <div className="logo"><a href="index.html" >BBS</a></div>
                    <div className="navbar navbar-static-top">
                    <div className="btn-grps pull-right">
                        <a className="pink-btn dark-btn"  onClick={this.handleLogout.bind(this)}  >Logout</a>
                        <a  className="pink-btn" data-toggle="modal" data-target="#myModal">New Book</a>
                    </div>
                    </div>

                </header>


                <div className="col-md-4 ">           

                <div id="myModal" className="modal fade" role="dialog">
                    <div className="modal-dialog">
                        <div className="modal-content">
                            <div className="modal-header">
                                <button type="button" className="close" data-dismiss="modal">&times;</button>
                                <form onSubmit={this.handleNewBook.bind(this)}>
                                    <h4 className="modal-title" >New Book</h4>
                                    <label htmlFor="book">Book:</label>
                                    <select name="book"  id="" onChange={event => this.setState({book:event.target.value})}>
                                        {this.showBibleBooks()}                   
                                    </select>
                                    <input type="button" value="Start0" onClick={this.start.bind(this)}/>
                                </form>
                                
                                
                                

                            </div>
                            <div className="modal-body">
                            



                                
                            </div>
                            <div className="modal-footer">
                                <button type="button" className='btn btn-success'  data-dismiss="modal" id="signupSubmit" onClick={this.handleNewBook.bind(this)}> Enter</button>
                            </div>
                        </div>
                    
                    </div>
                </div>
            </div>
            </div>

        );
    }//end of render


}//end of classNameName


function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        startNewBookAction
        
    },
     dispatch)
}

function mapStateToProps(state) {
    return {
        newBook:state
    }
}




export default connect(mapStateToProps, mapDispatchToProps)(Header);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

头组件。如何在我的应用中实现这个小部件。

Answer 1

尝试在构造函数后添加：

componentWillMount () { 
    const script = document.createElement("script");
    script.src = "//bibles.org/widget/client"; 
    script.async = true; 
    document.body.appendChild(script); 
}