1
以下のように構成されたコンポーネントがあります。ユーザーがカードコレクションの終わりに達すると、react-waypointを使用して追加のカードを取得してレンダリングします。アイテムを取得して追加した後、リアウェイポイントのスクロール位置がリセットされるのを防ぐ
componentDidMount() {
const { actions, user } = this.props;
if (!user) return;
actions.getConnections(user.guid, 0, DEFAULT_FETCH_ROW_COUNT)
.then(({ data }) => {
this.setState({
fullyLoaded: data.length < DEFAULT_FETCH_ROW_COUNT,
firstLoaded: true
});
});
}
loadMoreConnections(rows = DEFAULT_FETCH_ROW_COUNT) {
const { user, connections, actions } = this.props;
const { fullyLoaded } = this.state;
if (fullyLoaded) return;
return actions.getConnections(user.guid, connections.length, rows, true)
.then(({ data }) => {
this.setState({
fullyLoaded: data.length < rows
});
});
}
showConnections() {
const { user, connections, actions } = this.props;
return (
connections.map((connection, index) => (
<div className="col-12 col-md-6 col-lg-4 col-xl-3 card-wrapper" key={index}>
{(!this.state.fullyLoaded && index === (connections.length - THRESHOLD)) && (index >= DEFAULT_FETCH_ROW_COUNT - THRESHOLD) && (
<Waypoint
onEnter={() => {
this.loadMoreConnections();
}}
/>
)}
<Link
id={`${idPrefix}ConnectionCardLink${index}`}
to={`/${ROUTES.PROFILE}/${getProfileUrl(connection)}`}
>
<ConnectionCard
idPrefix={idPrefix}
src={connection.photo ? connection.photo.url : ''}
idSuffix={index}
>
<h5 id={`${idPrefix}NameTxt${index}`}
className="text-truncate font-weight-bold">{connection.firstname} {connection.lastname}</h5>
<h6 id={`${idPrefix}PrimaryJobTxt${index}`}
className="text-truncate text-secondary primary-job">
{connection.primaryWorkHistory
? (
`${connection.primaryWorkHistory.jobs[0].jobName} @ ${connection.primaryWorkHistory.employer.name}`
+ `${connection.primaryWorkHistory.employer.location
? `, ${connection.primaryWorkHistory.employer.location.city}, ${connection.primaryWorkHistory.employer.location.state}`
: '' }`
)
: ' '
}
</h6>
<div className="button-group">
<Link
id={`${idPrefix}ViewProfileBtn${index}`}
className="button hollow small"
to={`/${ROUTES.PROFILE}/${getProfileUrl(connection)}`}
>
View Profile
</Link>
<Button
id={`${idPrefix}MessageBtn${index}`}
className="small"
label="Message"
onClick={(e) => {
e.preventDefault();
actions.openChatByParticipants(user, connection);
}}
/>
</div>
</ConnectionCard>
</Link>
</div>
))
);
}
showNoResults() {
return (
<EmptySearchResults
idPrefix={`${idPrefix}EmptySearch`}
title="Don’t be shy."
description="It looks like you don’t have any connections, but don’t worry you can search our community."
>
<Link
id={`${idPrefix}GetConnectedBtn`}
className="button action-button"
to={`/${ROUTES.COMMUNITY}/suggested`}
>
Get Connected
</Link>
</EmptySearchResults>
)
}
render() {
const { connections, isFetchingConnections } = this.props;
const { firstLoaded } = this.state;
let view = null;
if (connections.length) {
view = this.showConnections();
} else if (firstLoaded) {
view = this.showNoResults();
}
return (
<div className="row">
{view}
</div>
);
}
これは予期したとおりに動作しますが、この追加データがフェッチされてレンダリングされている間にローダーコンポーネントを表示します。これを行うには、私は、次の追加/変更することで、ローダーコンポーネントを実装しようとしました：
showLoader() {
return (
<div className="select-overlay-loader d-flex justify-content-center align-items-center">
<Loader />
</div>
);
}
if(isFetchingConnections) {
view = this.showLoader();
} else if (connections.length) {
view = this.showConnections();
} else if (firstLoaded) {
view = this.showNoResults();
}
これらの変更は、より多くのカードデータをフェッチし、表示されている間、ローダーコンポーネントを表示しませんが、新しいカードの後がリストに追加されると、リストのスクロールビューが先頭にリセットされます。リスト間のスクロール位置をどのように保存できるかわかりません。
私は、このような新しいデータをフェッチする前に、リストの現在のscrollHeghtに、リストのscrollTopスプライトを設定することをお勧めこのone
と同様の質問に対する回答を見てきました。
私は試しましたが、この修正プログラムを実装できませんでした。
コンポーネントはどこに配置されていますか？レンダリングされたリストの最後に配置されている例を見てきましたが、この場合、コンポーネントはマップ関数のすべてのカードコンポーネントの上部に含まれています。
私は既存のコードベースに取り組んでおり、Reactには新しくなっています。したがって、私のところでは、何の不注意も許してください。私は私の質問がはっきりと示されることを望む。
誰でも正しい方向に向けることができますか？
乾杯！あなたが最後のスクロール位置を保存し、更新した後、あなたはそれを復元する各アップデートの前に
componentWillUpdate() {
this.scrollHeight = this.scrollableElement.scrollHeight;
this.scrollTop = this.scrollableElement.scrollTop;
}
componentDidUpdate() {
this.scrollableElement.scrollTop = this.scrollTop +
(this.scrollableElement.scrollHeight - this.scrollHeight);
}
：あなたはこのような何かをする必要がありReact.jsで逆無限スクロールを実現するために