javascriptを勉強し始めました、新参者です。
よろしくお願いいたします。
本題ですが、今こちらのサイト(http://mae.chab.in/archives/2885)
を参考に、react+reduxを勉強しています。
こちらのサンプルプログラムに、簡単な「react-bootstrap-table」
(http://allenfang.github.io/react-bootstrap-table/example.html#basic)
を追加しようとしているのですが、追加方法がわからず、足が止まってしまった状態です。
どなたかアドバイスいただけませんでしょうか。
javascript
1import React from 'react'; 2import ReactDOM from 'react-dom'; 3import { createStore } from 'redux'; 4import { Provider, connect } from 'react-redux'; 5 6import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table'; 7 8 9 10/* Actionsの実装 */ 11 12// Action名の定義 13const SEND = 'SEND'; 14 15// Action Creators 16function send(value) { 17 // Action 18 return { 19 type: SEND, 20 value, 21 }; 22} 23 24/* Reducersの実装 */ 25 26function formReducer(state, action) { 27 switch (action.type) { 28 case 'SEND': 29 return Object.assign({}, state, { 30 value: action.value, 31 }); 32 default: 33 return state; 34 } 35} 36 37/* Storeの実装 */ 38 39const initialState = { 40 value: null, 41}; 42const store = createStore(formReducer, initialState); 43 44/* Viewの実装 */ 45 46// View (Container Components) 47class FormApp extends React.Component { 48 render() { 49 return ( 50 <div> 51 <FormInput handleClick={this.props.onClick} /> 52 <FormDisplay data={this.props.value} /> 53 //<Table/> ・・・ 追加するとエラー 54 </div> 55 ); 56 } 57} 58FormApp.propTypes = { 59 onClick: React.PropTypes.func.isRequired, 60 value: React.PropTypes.string, 61}; 62 63// View (Presentational Components) 64class FormInput extends React.Component { 65 send(e) { 66 e.preventDefault(); 67 this.props.handleClick(this.myInput.value.trim()); 68 this.myInput.value = ''; 69 return; 70 } 71 render() { 72 return ( 73 <form> 74 <input type="text" ref={(ref) => (this.myInput = ref)} defaultValue="" /> 75 <button onClick={(event) => this.send(event)}>Send</button> 76 // 簡単表示テーブル 77 <table style={{border: "2px solid black"}} className='table table-bordered'> 78 <tr> 79 <th style={{border: "2px solid black"}}>表示No</th> 80 <th style={{border: "2px solid black"}}>名前</th> 81 </tr> 82 <tr> 83 <th style={{border: "2px solid black"}}>1</th> 84 <th style={{border: "2px solid black"}}>test1</th> 85 </tr> 86 <tr> 87 <th style={{border: "2px solid black"}}>2</th> 88 <th style={{border: "2px solid black"}}>test2</th> 89 </tr> 90 </table> 91 // <BootstrapTable> 92 // <TableHeaderColumn dataField='表示No' isKey>Product ID</TableHeaderColumn> 93 // <TableHeaderColumn dataField='名前'>Product Name</TableHeaderColumn> 94 // </BootstrapTable> 95 </form> 96 ); 97 } 98} 99FormInput.propTypes = { 100 handleClick: React.PropTypes.func.isRequired, 101}; 102 103// View (Presentational Components) 104class FormDisplay extends React.Component { 105 render() { 106 return ( 107 <div>{this.props.data}</div> 108 ); 109 } 110} 111FormDisplay.propTypes = { 112 data: React.PropTypes.string, 113}; 114 115 116//Table(追加したいテーブル) 117class Table extends React.Component { 118 render() { 119 return ( 120 //<BootstrapTable data={ products }> 121 <BootstrapTable> 122 <TableHeaderColumn dataField='表示No' isKey>Product ID</TableHeaderColumn> 123 <TableHeaderColumn dataField='名前'>Product Name</TableHeaderColumn> 124 </BootstrapTable> 125 ); 126 } 127} 128 129// Connect to Redux 130function mapStateToProps(state) { 131 window.console.log(state); 132 return { 133 value: state.value, 134 }; 135} 136function mapDispatchToProps(dispatch) { 137 return { 138 onClick(value) { 139 dispatch(send(value)); 140 }, 141 }; 142} 143const AppContainer = connect( 144 mapStateToProps, 145 mapDispatchToProps 146)(FormApp); 147 148// Rendering 149ReactDOM.render( 150 <Provider store={store}> 151 <AppContainer /> 152 </Provider>, 153 document.querySelector('.content') 154); 155
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/01 08:46