reactjs - 如何制作一个可滚动组件，当我附加子组件时自动滚动到最新的子组件？

Question

我正在用 reactjs 构建一个小型聊天程序。我要做的是构建一个呈现为 <div> 的组件。标记 dom。而且我正在附加子组件，这些组件也是 <div>将 doms 标记到此组件上。然后，如果子组件使用了父组件的所有空间，它应该能够滚动。如何在 reactjs 中做到这一点？

假设我的子组件是这样的:

class Message extends Component {
    render() {
        return (
                <div className="message">
                    <strong>{this.props.user}</strong>:&nbsp;
                    <span>{this.props.text}</span>
                </div>
        );
    }
}

这是父组件:

class MessageBoard extends Component {
    render() {
        return (
            <div className={this.props.styleClass}>
                <h2>{this.props.body}</h2>
                {
                    this.props.messages.map((message, i) => {
                        return (
                                <Message 
                                    key={i}
                                    user={message.user}
                                    text={message.text}
                                />
                            );
                    })
                }
            </div>
        );
    }
}

父组件现在无法滚动。我可以更改其 css 样式以使其正常工作吗？

Answer 1

要实现您想要隐式设置 height父 div 和集合 overflow-y: scroll像这样:

.parentDiv {
    height: 300px;
    overflow-y: scroll;
}

如何滚动到最后一个子元素？

为此，您可以像这样重构 MessageBoard 组件:

class MessageBoard extends Component {
    render() {
        return (
            <div ref={function (element){
                if (element) {
                    this.messagesContainer = element;
                }
                let lastIndex = this.messagesContainer.length - 1;
                this.messagesContainer[lastIndex].scrollIntoView();
            }.bind(this)} ..>
                ...
            </div>
        );
    }
}

我们在这里做什么？

我们设置ref使用回调函数的属性，该函数将在组件安装到 DOM 后立即调用，并且(如果在 HTML 元素上设置)在每次更新时调用。

回调函数获取一个参数(在 HTML 元素的情况下，它是一个实际的 DOM 节点引用)，我们将其保存在一个单独的变量中(因为参数可能是 null 在下一次调用中)然后我们使用该变量获取组件的最后一个 child 并调用本地 scrollIntoView()将父级滚动到底部。