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

Question

I hope everyone is having a good day. I am working with the bible.org API to create a learning app for the bible.

bible.org gives the option to input their widget on your own website.

When you finish creating your widgets they give you this:

Paste the following code into your website or blog.

BIBLESEARCH.widget({ "background": "FFFFFF", "color": "E2615C" });

I am using Reactjs and would like to implement it in my Header component.

I provided an example of my 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> 

eader component. How can I implement this widget in my app.

Answer 1

Try to add after constructor:

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