Question

很不幸，我的组件有问题。因此，让我们多解释一下。

我有div容器，里面有一些内容。此容器具有height: 100%和overflow-auto样式。当用户转到相应的组件时，它将自动滚动到容器的底部。那是什么问题呢？

所以问题是用户通过<Link> or <Redirect>转到该组件时，useRef返回null。我尝试将useEffect与ref.current的dep一起使用，但仍然只能在页面刷新时使用，而不能与Link等一起使用。

停止讲话，这是我的一些代码：

import React, {useState, useEffect, useRef} from "react";
import {useTranslation} from "react-multi-lang";
import UserLayout from "../../containers/UserLayout";
import HomeLayout from "../../containers/HomeLayout";
import {useParams} from "react-router";
import {connect} from "react-redux";

const TicketAnswers = props => {
    const t = useTranslation();
    const [reply, setReply] = useState("");
    const [ticket, setTicket] = useState([]);

    const user = props.user.data
    const {id} = useParams();
    const messageDivBox = useRef(null);

    useEffect(() => {
        if (!props.userAltData.loading) {
            setTicket(props.userAltData.data.tickets.filter(t => t.id === parseInt(id))[0])
        }

        // Scroll into the last reply
        if (messageDivBox.current !== null) {
            messageDivBox.current.scrollTop = messageDivBox.current.scrollHeight;
        }
    }, [props.userAltData.loading, messageDivBox.current]);

    const _handleSubmit = e => {
        e.preventDefault();
    }

    return (
        <HomeLayout>

            <UserLayout>
                <div className="flex-1">
                    <div
                        className="rounded  shadow-lg p-4 flex flex-col justify-between leading-normal">
                        <div className="font-bold text-xl mb-2 mt-2">
                            {t('user.ticket-answers')}: {ticket.name} <br/>
                        </div>
                        <hr/>
                        {/*HERE IS MY DIV WITH ref*/}
                        <div className="overflow-auto h-56" ref={messageDivBox}>
                            {(ticket.answers === undefined || ticket.answers.length === 0) ? (t("user.no-ticket-replies")) : ticket.answers.map((ans, key) => (
                                <div className="flex flex-wrap space-x-2 my-2" key={key}>
                                    <div className="max-w-full w-full lg:max-w-full">
                                        <div
                                            className="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
                                            <div className="mb-8">
                                                <p className="text-gray-700 text-base">
                                                    {ans.content}
                                                </p>
                                            </div>
                                            <hr/>
                                            <div className="flex mb-2 mt-4">
                                                <img className="w-10 h-10 rounded-full mr-4"
                                                     src={`https://www.gravatar.com/avatar/${user.email}`}
                                                     alt={`Avatar of ${user.name}`}/>
                                                <div className="text-sm">
                                                    <p className="text-gray-900 leading-none">{user.id === ans.user_id ? user.name : ans.user.name}</p>
                                                    <p className="text-gray-600">{ans.created_at}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                        <hr/>
                        <div className="mt-2 mb-2 lg:min-w-full">
                            <textarea className="w-full text-black" onChange={e => setReply(e.target.value)}/>
                        </div>
                    </div>
                </div>
            </UserLayout>
        </HomeLayout>
    )

}

const mapStateToProps = state => {
    return {
        user: state.user,
        userAltData: state.userAltData
    }
}

export default connect(mapStateToProps)(TicketAnswers);

所以我做错了。请给我一些建议或技巧。谢谢建议！

编辑1：

我制作的函数具有与useEffect()中相同的逻辑然后在我的onLoad上添加<div>事件以运行该自定义函数，该函数便可以正常工作。如果您知道其他方法，请让我看看

示例：

const scrollToBottom = () => {
    // Scroll into the last reply
    if (messageDivBox.current !== null) {
        messageDivBox.current.scrollTop = messageDivBox.current.scrollHeight;
    }
    return true;
}

return (<div onLoad={scrollToBottom}>...content</div>);

在不刷新浏览器的情况下呈现useRef时为null

0 个答案: