有许多模式可以实现这一点。这个样本是我想出来的，目的是让你站起来。

首先创建一个组件类，它具有用于滚动效果的超大元素。当拖动滚动条时，该组件调用其handleScrollReact 属性通知其父组件，值为scrollTop。

var Elem = React.createClass({
    render() {
        return (
            <div ref="elem"
                onScroll={ this.onScroll }
                style={{ width: "100px", height: "100px", overflow: "scroll" }}>
                <div style={{ width: "100%", height: "200%" }}>Hello!</div>
            </div>
        );
    },
    componentDidUpdate() {
        this.refs.elem.scrollTop = this.props.scrollTop;
    },
    onScroll() {
        this.props.handleScroll( this.refs.elem.scrollTop );
    }
});

父组件，又名包装器，将滚动顶部值保持在其状态。它handleScroll作为回调传递给子组件。子元素上的任何滚动都会触发回调、设置状态、导致重绘并更新子组件。

var Wrapper = React.createClass({
    getInitialState() {
        return {
            scrollTop: 0
        }
    },
    render() {
        return (
            <div>
                <Elem scrollTop={ this.state.scrollTop } handleScroll={ this.handleScroll } />
                <Elem scrollTop={ this.state.scrollTop } handleScroll={ this.handleScroll } />
            </div>
        );
    },
    handleScroll( scrollTop ) {
        this.setState({ scrollTop });
    }
});

并渲染包装器，假设现有<div id="container"></div>.

ReactDOM.render(
    <Wrapper />,
    document.getElementById('container')
);

2019年的答案

首先，修复：

const resetScrollEffect = ({ element }) => {
  element.current.getScrollableNode().children[0].scrollTop = 0
}

const Table = props => {
  const tableRef = useRef(null)
  useEffect(() => resetScrollEffect({ element: tableRef }), [])
  return (
    <Component>
      <FlatList
        ref={someRef}
      />
    </Component>
  )
}

二、稍微解释一下：

不知道您来到这里的原因是什么，但我已将其用于flex-direction: column-reverse我的 FlatList（它是一个元素列表）。我需要这个属性z-index。但是，浏览器将它们的滚动位置设置为此类元素（表格、聊天等）的末尾 - 这可能很有用，但在我的情况下我不需要。

此外，示例使用React Hooks 显示，但您可以使用更旧的更传统的方式来定义 refs

this.refs 已弃用。使用 reactjs.org/docs/refs-and-the-dom.html#creating-refs

import React from 'react';

class SomeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.resultsDiv = React.createRef();
  }

  someFunction(){
     this.resultsDiv.current.scrollIntoView({behavior: 'smooth'});

     // alternative:
     // this.resultsDiv.current.scrollTop = 0;
  }

  render() {
    return (
      <div ref={this.resultsDiv} />
    );
  }
}

export default SomeComponent;

这是Season's answer的更新版本，包括一个可运行的片段。它使用推荐的方法来创建 refs。

class Editor extends React.Component {
    constructor(props) {
        super(props);
        this.content = React.createRef();
        this.handleScroll = this.handleScroll.bind(this);
    }

    componentDidUpdate() {
        this.content.current.scrollTop = this.props.scrollTop;
    }
    
    handleScroll() {
        this.props.onScroll( this.content.current.scrollTop );
    }

    render() {
        let text = 'a\n\nb\n\nc\n\nd\n\ne\n\nf\n\ng';
        return <textarea
            ref={this.content}
            value={text}
            rows="10"
            cols="30"
            onScroll={this.handleScroll}/>;
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {scrollTop: 0};
        this.handleScroll = this.handleScroll.bind(this);
    }

    handleScroll(scrollTop) {
        this.setState({scrollTop: scrollTop});
    }

    render() {
        return <table><tbody>
            <tr><th>Foo</th><th>Bar</th></tr>
            <tr>
                <td><Editor
                    scrollTop={this.state.scrollTop}
                    onScroll={this.handleScroll}/></td>
                <td><Editor
                    scrollTop={this.state.scrollTop}
                    onScroll={this.handleScroll}/></td>
            </tr>
        </tbody></table>;
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>