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方法。

请在下面找到代码段：

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元素的一个属性，不作为prop传递给组件。所以我希望你能看到我的困惑，因为当我搜索google / stack-overflow时，我看到很多关于子组件的评论。我完全知道字符串引用已被折旧，并且应该使用回调，但无论我尝试什么，我都无法摆脱此错误消息。

非常感谢任何帮助。

Answer 1

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

在下一个渲染周期之前实际调用了componentWillUpdate Hook，这意味着在渲染组件之前访问ref，这意味着您始终可以从渲染周期访问ref。 ref会在下一个渲染周期中更新。

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

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

当在反应组件内部的div上使用ref时，错误'ref不是prop'

1 个答案: