bible.orgウィジェットを自分のサイトに追加するにはどうすればいいですか？

Question

誰もが良い日を過ごしていることを願っています。 私はbible.org APIを使って聖書の学習アプリを作成しています。

bible.orgは、自分のWebサイトにウィジェットを入力するオプションを提供します。

あなたのウィジェットの作成が完了すると、彼らはあなたにこれを与える：

あなたのウェブサイトやブログに以下のコードを貼り付けます。

BIBLESEARCH.widget（{ "バックグラウンド"： "FFFFFF"、 "色"： "E2615C" }）。

私はReactjsを使用しており、これをヘッダコンポーネントに実装したいと考えています。

私は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成分の例を提供しました。私のアプリでこのウィジェットを実装するにはどうすればいいですか？

Answer 1

コンストラクタの後に追加しよう：

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