0
모두가 좋은 하루 보내길 바랍니다. 나는 bible.org API를 사용하여 성경 학습용 앱을 제작하고 있습니다.내 사이트에 bible.org 위젯을 추가하려면 어떻게해야합니까?
bible.org는 자신의 웹 사이트에 위젯을 입력하는 옵션을 제공합니다.
귀하의 웹 사이트 또는 블로그에 다음 코드를 붙여 : 당신이 당신의 위젯을 작성을 완료하면
는 당신이를 제공합니다.
BIBLESEARCH.widget ({ "배경": "FFFFFF" "색상": "E2615C" });Reactjs를 사용 중이고 헤더 구성 요소에 구현하려고합니다.
는 내 Himport 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">×</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 성분의 예를 제공 하였다. 내 앱에서이 위젯을 구현하려면 어떻게해야합니까?
먼저 당신이 당신의 사이트 http://bibles.org/widget/client이 스크립트를로드해야 할 필요가 무엇을, 당신은 당신이로 BIBLESEARCH을 사용할 수 있습니다 전역 개체. http://bibles.org/share/widget에 가서 위젯을 먼저 구성한 다음 사이트에서 스크립트를 추가해야한다고 생각합니다. – Meroz
좋아요. 이미 스크립트와 객체를 가지고있는 사이트에서 위젯을 구성했습니다. – Champa
제 질문은이 위젯을 reactjs (jsx) 코드에 구현하는 방법입니다. – Champa