在反应组件内部的 div 上使用 ref 时出现错误'ref is not a prop'

Question

所以我使用 refs 的主要目的是让我可以重置可滚动 div 的滚动位置，这是添加内容之前 div 的图像this is how it looks before dynamically adding divs to the scrollable container div

这是添加框后 div 的屏幕截图： the box is created outside of viewport and is created at the top of the scrollable area

所以为了能够保持可滚动区域顶部的视口，我希望使用 refs 来执行 ReactDOM.findDOMNode(this.songIdWrapper) 然后操作 scrollTop 或使用 scrollTo 方法。

请在下面找到代码sn-p：

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 时，我看到了很多与子组件相关的 cmets。我完全知道字符串引用已被贬值，应该使用回调，但无论我尝试什么，我都无法摆脱这个错误消息。

任何帮助将不胜感激。

Answer 1

我猜问题是您尝试访问 componentWillUpdate Hook 中的 ref。因为从纯粹的设置来看没有错。

componentWillUpdate Hook 在下一个渲染周期之前被实际调用，这意味着你在你的组件被渲染之前访问 ref，这意味着你总是在之前的渲染周期中访问 ref。 ref 在下一个渲染周期中更新。

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/tapping_into_componentwillupdate.html

我认为你应该在组件更新之后进行滚动位置处理，而不是在它更新之前！