像React JS中的“ ScrollView”组件？

Question

我在我的应用中将搜索结果显示为无序列表。当有5个搜索结果时，这种方法很好用，但是当我开始获得10-20个结果时，列表在页面下方开始越来越多。我想避免只在整个网页中向下滚动即可看到列表中较低的内容。是否有类似滚动视图的内容，我可以在其中定义一定的高度，然后用户可以在容器内部滚动？

我当前的代码：

class SearchResults extends Component {
    render() {
        return (
            <div style={styles.wrapperDiv}>
                <div style={styles.resultsLeft}>
                    <ul style = {{ listStyleType: "none" }}>
                        <Result results={this.props.results}/>
                    </ul>
                </div>
                <div style={styles.mapRight}>
                    <GoogleMap/>
                </div>
            </div>
        );
    }
}

Answer 1

您可以尝试给父容器（wrapperDiv）设置一个高度，例如500像素，并将其设置overflow-y为scroll：

<div styles={{ height: '500px', overflowY: 'scroll' }} style={styles.wrapperDiv}>
  ...
</div>