1

所以不幸的是我的组件有问题。所以让我们再解释一下。

我有一个div容器，里面有一些内容。这个容器有height: 100%风格overflow-auto。当用户转到相应的组件时，它会自动滚动到容器的底部。那么有什么问题呢？

所以问题是当用户通过<Link> or <Redirect> useRef返回 null 访问该组件时。我尝试使用useEffectdepref.current但仍然仅适用于页面刷新而不适用于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：

我用与 in 相同的逻辑创建了一个函数，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>);
4

0 回答 0