从底部 ReactJS 的滚动开始答案

【问题标题】：Starting with scroll at bottom ReactJS从底部 ReactJS 的滚动开始
【发布时间】：2021-02-01 12:24:35
【问题描述】：

我有 2 个组件（父母和孩子）。子组件在可滚动的 div 中有一长串来自服务器的消息。我只是想从底部的滚动开始页面 - 就像正常的聊天一样。我不想看到它滚动到底部。我可以用 javascript 或 CSS 做到这一点吗？

这是我想要的一个例子。注意：不使用平面列表。 https://codesandbox.io/s/react-native-h32if?file=/src/App.js

提前致谢。

class ParentComponent extends Component{

    render(){
      return(
  
        <div>
                <ChildComponent key={uniqueKey()} stream_uid={this.props.match.params.stream_uid} />       
        </div>
      )
    }
  
}


class ChildComponent extends Component{

    constructor() {

        this.state = {
          chat_messages: []
        }

    }

    componentDidMount () {

        this.props.dispatch(getStream(this.props.stream_uid,1,this.props.history)); 

        if(this.props.stream) {

            this.setState({
                chat_messages: this.props.stream.stream.messages
            })
        }

    }

  render(){

    return(
        <div>

            {Array.isArray(this.state.chat_messages) && this.state.chat_messages.map(message => {                           
                return (
                    <div>
                        <div>{message.username}</div>
                        <div>{message.text}</div>
                    </div>
                )

            })}                                                            
        </div>

    )

  }
}

【问题讨论】：

标签： javascript css reactjs scroll react-component

【解决方案1】：

您可以通过将 div 设置为像这样滚动到底部来做到这一点

import React, { useEffect, useRef } from "react";
import "./styles.css";

export default function App() {
  const listRef = useRef();
  useEffect(() => {
    listRef.current.scrollTo(0, listRef.current.scrollHeight, "auto");
  }, []);

  return (
    <div
      style={{ height: "200px", overflowY: "scroll" }}
      id="list"
      ref={listRef}
    >
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
    </div>
  );
}

这是一个密码箱demo

【讨论】：

【解决方案2】：

我创建了一个父视图来做出反应。这是一个demo看看吧

[https://codesandbox.io/s/react-native-forked-2o3dq?file=/src/App.js][1]

<View style={styles.main}>
        <FlatList
          ref={(ref) => (this._flatlistRef = ref)}
          inverted
          showsVerticalScrollIndicator={false} // does not work
          contentContainerStyle={styles.container}
          data={data}
          keyExtractor={this.keyExtractor}
          renderItem={this.renderItem}
          onEndReached={this.props.onLoadMore}
        />
      </View>
 container: {
    overflowY: "scroll",
    height: 200,
    backgroundColor: "red"
  },

【讨论】：