2
그래서 ref를 사용하는 주된 목적은 스크롤 가능한 div의 스크롤 위치를 재설정 할 수 있도록하기위한 것입니다. the box is created outside of viewport and is created at the top of the scrollable area반응 구성 요소의 div에서 ref를 사용할 때 'ref is not prop'가 사용됩니다.
그래서 난에 심판을 사용 바라고 스크롤 영역의 상단에있는 뷰포트를 유지 할 수 있도록 : DIV 내용 this is how it looks before dynamically adding divs to the scrollable container 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를 검색 할 때 자식 구성 요소와 관련된 많은 주석을 볼 수 있습니다. 난 완전히 문자열을 심판 감가 상각되어 콜백을 사용해야하지만 내가 뭘하려고 해도이 오류 메시지를 없앨 수 없다는 것을 알고있다.도움을 주시면 감사하겠습니다.
선택됨 https://stackoverflow.com/questions/38089895/react-ref-is-not-a-prop? – Dane
나는 이것을 보았는데 도움이되지 못했습니다. 문자열을 ref로 사용한 다음 this.refs.string으로 참조하면 여전히 동일한 오류가 발생합니다. 콜백을 사용하면이 키워드와 클래스에 추가 한 속성에 대해 선택한 이름을 사용하여 콜백을 사용하여 액세스 할 수 있다고 생각했습니다. –
어떤 버전의 반응을 실행하고 있습니까? – larrydahooster