###前提・実現したいこと
React + Reduxの勉強をしています。
勉強に使っているリポジトリのソースコードを読みながら、写経していました。しかし、同じように実装していったところ、分割代入 (destructuring assignment)の箇所で詰まってしまいました。
エラーメッセージに示されているURLを見たのですが、なにがだめなのか理解できませんでした。
###発生している問題・エラーメッセージ
javascript
1 2Warning: Unknown props `createLane`, `updateLane`, `deleteLane`, `attachToLane`, `move`, `createNote`, `updateNote`, `deleteNote` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop 3 in div (created by Lane) 4 in Lane (created by DropTarget(Lane)) 5 in DropTarget(Lane) (created by Connect(DropTarget(Lane))) 6 in Connect(DropTarget(Lane)) (created by Unknown) 7 in div (created by Unknown) 8 in Unknown (created by App) 9 in div (created by App) 10 in App (created by DragDropContext(App)) 11 in DragDropContext(App) (created by Connect(DragDropContext(App))) 12 in Connect(DragDropContext(App)) (created by Unknown) 13 in div (created by Unknown) 14 in Provider (created by Unknown) 15 in Unknown
###該当のソースコード
javascript
1import React from 'react'; 2import {compose} from 'redux'; 3import {connect} from 'react-redux'; 4import {DropTarget} from 'react-dnd'; 5import Notes from './Note'; 6import Editable from './Editable'; 7import ItemTypes from '../constants/itemTypes'; 8import * as laneActions from '../actions/lanes'; 9import * as noteActions from '../actions/notes'; 10 11 12const noteTarget = { 13 hover(targetProps, monitor) { 14 const sourceProps = monitor.getItem(); 15 const sourceId = sourceProps.id; 16 17 if (!targetProps.lane.notes.length) { 18 targetProps.attachToLane( 19 targetProps.lane.id, 20 sourceId 21 ); 22 } 23 } 24}; 25 26class Lane extends React.Component { 27 render() { 28 const {connectDropTarget, lane, laneNotes, ...props} = this.props; 29 const laneId = lane.id; 30 31 return connectDropTarget( 32 <div {...props}> 33 <div className="lane-header" 34 onClick={() => props.updateLane({id: laneId, editing: true})}> 35 <div className="lane-add-note"> 36 <button onClick={this.addNote.bind(this, laneId)}>+</button> 37 </div> 38 <Editable className="lane-name" editing={lane.editing} 39 value={lane.name} 40 onEdit={name => props.updateLane({id: laneId, name, editing: false})} /> 41 <div className="lane-delete"> 42 <button onClick={this.deleteLane.bind(this, lane)}>x</button> 43 </div> 44 </div> 45 <Notes 46 notes={laneNotes} 47 onValueClick={id => props.updateNote({id, editing: true})} 48 onEdit={(id, task) => props.updateNote({id, task, editing: false})} 49 onDelete={(id, e) => this.deleteNote(laneId, id, e)} /> 50 </div> 51 ); 52 } 53 deleteLane(lane, e) { 54 e.stopPropagation(); 55 56 const laneId = lane.id; 57 58 lane.notes.forEach(noteId => { 59 this.props.detachFromLane(laneId, noteId); 60 this.props.deleteNote(noteId); 61 }); 62 63 this.props.deleteLane(laneId); 64 } 65 66 addNote(laneId, e) { 67 e.stopPropagation(); 68 69 const o = this.props.createNote({ 70 task: 'New Task' 71 }); 72 this.props.attachToLane(laneId, o.note.id); 73 } 74 deleteNote(laneId, noteId, e) { 75 e.stopPropagation(); 76 77 this.props.detachFromLane(laneId, noteId); 78 this.props.deleteNote(noteId); 79 } 80} 81 82const mapStateToProps = (state, props) => ({laneNotes: props.lane.notes.map(id => state.notes[state.notes.findIndex(note => note.id === id)]).filter(note => note)}); //引数のpropsは省略可 83 84const mapDispatchToProps = { 85 ...laneActions, 86 ...noteActions 87}; 88 89export default compose( 90 connect( 91 mapStateToProps, //Function 92 mapDispatchToProps //Object 93 ), 94 DropTarget(ItemTypes.NOTE, noteTarget, (connect) => ({ 95 connectDropTarget:connect.dropTarget() 96 })) 97)(Lane);
###試したこと
参考URLを見てみて、ES7でないと対応できないのかと考えて、
javascript
1 2 "babel-preset-stage-0": "^6.24.1", 3 "babel-preset-es2016": "^6.24.1", 4
などを要れてみましたが、直らずでした。
なにか他に策はありますでしょうか?
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。