如何将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小部件添加到我的网站？

回答

相关问题