Блог

У меня есть 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) amp;amp; this.state.chat_messages.map(message => {                           
                return (
                    <div>
                        <div>{message.username}</div>
                        <div>{message.text}</div>
                    </div>
                )

            })}                                                            
        </div>

    )

  }
}

  

вы можете сделать это, установив 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>
  );
}
  

это демонстрация codesndbox

Я создал родительское представление для реагирования. Вот демонстрация, посмотрите

[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"
  },