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

要实现这一目标，您希望隐式设置parent-div的height并设置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）然后我们得到最后一个子节点使用变量的组件并调用本机scrollIntoView()将父级滚动到底部。

当我附加子组件时，如何创建一个可自动滚动到最新子组件的可滚动组件？

1 个答案: