Also das Hauptziel von mir mit Refs ist so, dass ich die Scroll-Position eines scrollbaren div zurücksetzen kann, dies ist ein Bild von der div bevor das Hinzufügen von Inhalten this is how it looks before dynamically adding divs to the scrollable container divFehler 'ref ist keine prop' wenn ref auf einem div innerhalb einer react Komponente verwendet wird
Dies ist ein Screenshot des div nach Boxen ihn hinzufügen: the box is created outside of viewport and is created at the top of the scrollable area
So in der Lage sein, das Ansichtsfenster an der Spitze des rollbaren Bereichs zu halten, ich refs zu verwenden ist die Hoffnung, Tun Sie ReactDOM.findDOMNode (this.songIdWrapper) und manipulieren Sie dann den scrollTop oder verwenden Sie scrollTo-Methoden.
Sie den Code-Schnipsel unten finden:
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;Die Fehlermeldung ich erhalte, ist: this is the error message stating that ref is not a prop
So wie ich bin ganz neu zu reagieren und so weit ich M ist sich bewusst, dass dies ein Attribut für ein Div-Element ist, das nicht als Prop für eine Komponente übergeben wurde. Ich hoffe, Sie können meine Verwirrung sehen, wenn ich google/stack-overflow suche, sehe ich viele Kommentare in Bezug auf untergeordnete Komponenten. Ich bin mir völlig bewusst, dass String Refs abgeschrieben wurden und dass Callbacks verwendet werden sollten, aber egal was ich versuche, ich kann diese Fehlermeldung nicht loswerden.
Jede Hilfe würde sehr geschätzt werden.
Überprüft https://stackoverflow.com/questions/38089895/react-ref-is-not-a-prop? – Dane
Ich habe mir das angeschaut und es hat nicht geholfen. Wenn ich eine Zeichenkette als Referenz verwende und sie dann mit this.refs.string referenziere, bekomme ich immer noch denselben Fehler. Ich dachte, mit dem Rückruf können Sie einfach darauf zugreifen, indem Sie das Schlüsselwort this und den Namen verwenden, den Sie für die Eigenschaft ausgewählt haben, die Sie der Klasse hinzufügen. –
In welcher Version von react laufen Sie? – larrydahooster