2

所以我使用 refs 的主要目的是让我可以重置可滚动 div 的滚动位置，这是添加内容之前 div 的图像这是在将 div 动态添加到可滚动容器 div 之前的样子

这是添加框后 div 的屏幕截图： 框是在视口之外创建的，并且是在可滚动区域的顶部创建的

因此，为了能够保持可滚动区域顶部的视口，我希望使用 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;

我得到的错误消息是： 这是指出 ref 不是道具的错误消息

所以我对反应很陌生，据我所知，这是 div 元素上的一个属性，没有作为道具传递给组件。所以我希望你能看到我的困惑，因为当我搜索 google/stack-overflow 时，我看到了很多与子组件相关的评论。我完全知道字符串引用已被贬值，应该使用回调，但无论我尝试什么，我都无法摆脱这个错误消息。

任何帮助将不胜感激。

4

1 回答 1

0

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

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

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

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

于 2017-11-24T10:34:47.943 回答