私がrefを使用する主な目的は、スクロール可能なdivのスクロール位置をリセットできるようにすることです。 the box is created outside of viewport and is created at the top of the scrollable areaエラー 'ref is not prop'反応コンポーネントのdiv内でdivを使用しているとき
は、だから私はへのREFを使用することを期待していますスクロール可能な領域の上部にビューポートを維持することができるようにする：divのコンテンツthis is how it looks before dynamically adding divs to the scrollable container div
を追加する前に、これはそれにボックスを追加した後のdivのスクリーンショットですReactDOM.findDOMNode（this.songIdWrapper）を実行し、次にscrollTopを操作するか、scrollToメソッドを使用します。
以下のコードスニペットを見つけてください：
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class AddPlaylist extends Component {
constructor(props){
super(props);
this.state = {
displaySearch: false,
id: '',
playlistName:'',
playlistTitle:'',
songs:[]
}
this.handleIdSubmit = this.handleIdSubmit.bind(this);
this.handleIdChange = this.handleIdChange.bind(this);
this.handleNamechange = this.handleNamechange.bind(this);
this.handleNameSubmit= this.handleNameSubmit.bind(this);
this.callback=this.callback.bind(this);
}
componentWillUpdate() {
console.log(ReactDOM.findDOMNode(this.songIdWrapper));
}
componentDidUpdate() {
}
callback (songId) {
this.songIdWrapper=songId;
}
render() {
return(
<div className='add-playlist-wrapper'>
<div className='form-wrapper container'>
<form onSubmit={this.handleNameSubmit} className='playlist-name-wrapper'>
<input className={this.state.submittedName ? 'hide-input' : ''} required onChange={this.handleNamechange} value={this.state.playlistName} placeholder='Playlist title'/>
{this.state.submittedName ? <p className='title'>{this.state.playlistTitle}</p> : null}
</form>
<form onSubmit={this.handleIdSubmit} className='add-id-wrapper'>
<div className='input-add-playlist'>
<input required onChange={this.handleIdChange} value={this.state.id} placeholder='Add song...'/>
<button type='submit' className='fabutton'>
<i className="add-button fa fa-plus-square-o fa-3x" aria-hidden="true"></i>
</button>
</div>
</form>
<div id='song-id-wrapper' ref={this.callback}>
{this.state.songs.map((song, i) => {
return (<div key={i} className='song'>
<p>{song}</p>
</div>
)
})}
</div>
</div>
</div>
)
}
handleIdSubmit (event) {
event.preventDefault();
const newState = this.state.songs.slice();
newState.push(this.state.id);
this.setState({
songs:newState
})
}
handleIdChange (event) {
this.setState({
id: event.target.value
})
}
handleNamechange (event) {
this.setState({
playlistName: event.target.value
})
}
handleNameSubmit (event) {
event.preventDefault();
this.setState({
playlistTitle: this.state.playlistName
})
}
}
export default AddPlaylist;私が取得エラーメッセージは次のとおりです。 this is the error message stating that ref is not a prop
だから私は、私の知る限り「と反応するのは非常に新しいですし、これは、コンポーネントへの小道具として渡されないdiv要素の属性であることを認識しています。ですから、私がgoogle/stack-overflowを検索したときのように私の混乱を見ることができることを願っています。子供のコンポーネントに関する多くのコメントがあります。私は完全にストリングrefsが減価償却されていることを知っているとそのコールバックを使用する必要がありますが、私はこのエラーメッセージを取り除くことはできません何を試すに関係なく使用する必要があります。
任意の助けいただければ幸いです。
チェック済みhttps://stackoverflow.com/questions/38089895/react-ref-is-not-a-prop？ – Dane
私はこれを見て、それは助けにはなりませんでした。文字列をrefとして使用してthis.refs.stringで参照すると、同じエラーが表示されます。コールバックを使うことで、thisキーワードとクラスに追加したプロパティの名前を使用してコールバックすることができます。 –
あなたはどのバージョンの反応を実行していますか？ – larrydahooster