如何將bible.org小部件添加到我的網站？

我希望每個人都有美好的一天。我正在使用bible.org API爲聖經創建一個學習應用程序。如何將bible.org小部件添加到我的網站？

bible.org提供了在自己的網站上輸入他們的小部件的選項。

當你完成創建你的部件，他們給你：

下面的代碼粘貼到您的網站或博客。

BIBLESEARCH.widget（{ 「背景」：「FFFFFF」，「顏色」：「E2615C」 }）;

我正在使用Reactjs並希望在我的Header組件中實現它。

我提供我ħ

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部件的一個例子。我如何在我的應用程序中實現這個小部件。

來源

2017-10-11 Champa

首先，你必須做你有這個腳本加載到你的網站http://bibles.org/widget/client什麼，那麼你就可以使用BIBLESEARCH作爲全局對象。我認爲你應該去http://bibles.org/share/widget並首先配置你的部件，然後從他們的網站添加腳本。 – Meroz

好吧我已經在他們的網站上配置了我的小部件，這就是我如何得到腳本和對象 – Champa

我的問題是如何將這個小部件實現到我的reactjs（jsx）代碼中。 – Champa

嘗試構造之後添加：

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

來源

2017-10-12 09:38:14 Meroz

如何將bible.org小部件添加到我的網站？

回答

相關問題