Question

我对React完全不熟悉，我需要通过包含来自另一个组件的一些div来创建无限滚动效果。我在网上找到了一个无限滚动库，我在index.js文件中使用它。我在Home.js中创建了我的div，但是我遇到了一些错误： - 错误：缺少强制道具“refreshFunction”。和 TypeError：this.props.next不是函数。有人可以帮帮我吗。我想即使我导出Home.js然后在index.js中导入它，但它仍然无法调用方法。有人可以让我知道我做错了什么以及如何纠正它？我已添加以下代码。

index.js

import React from 'react';
import { render } from "react-dom";
import InfiniteScroll from 'react-infinite-scroll-component';
import { Home } from "./components/Home";

class App extends React.Component{
render() {
    return (
        <InfiniteScroll
            pullDownToRefresh
            pullDownToRefreshContent={
                <h3 style={{ textAlign: 'center' }}>&#8595; Pull down to refresh</h3>
            }
            releaseToRefreshContent={
                <h3 style={{ textAlign: 'center' }}>&#8593; Release to refresh</h3>
            }
            refreshFunction={this.refresh}
            next={this.generateDivs}
            hasMore={true}
            loader={<h4>Loading...</h4>}
            endMessage={
                <p style={{ textAlign: 'center' }}>
                    <b>Yay! You have seen it all</b>
                </p>
            }>

            <Home/>

        </InfiniteScroll>
    );

}
}

render(<App />, window.document.getElementById("app"));

Home.js

import React from "react";

const style = {
    display: 'flex',
    alignItems: 'center',
    fontSize: 40,
    border: '2px solid red',
    margin: ' 0 auto 10px auto',
    textAlign: 'center'
}

const divs = [
    <div key={1} style={{ height: 200, ...style }}>Div no 1</div>,
    <div key={2} style={{ height: 200, ...style }}>Div no 2</div>,
    <div key={3} style={{ height: 200, ...style }}>Div no 3</div>,
    <div key={4} style={{ height: 200, ...style }}>Div no 4</div>,
    <div key={5} style={{ height: 200, ...style }}>Div no 5</div>,
    <div key={6} style={{ height: 200, ...style }}>Div no 6</div>,
    <div key={7} style={{ height: 200, ...style }}>Div no 7</div>,
    <div key={8} style={{ height: 200, ...style }}>Div no 8</div>,
];


export class Home extends React.Component{

    constructor() {
        super();
        this.state = {
            divs: divs
        };
        this.generateDivs = this.generateDivs.bind(this);
        this.refresh = this.refresh.bind(this);
    }

    generateDivs() {
        let moreDivs = [];
        let count = this.state.divs.length;
        console.log(count);
        for (let i = 0; i < 30; i++) {
            moreDivs.push(
                <div key={'div' + count++} style={{ height: 200, ...style }}>
                    Div no {count}
                </div>
            );
        }
        setTimeout(() => {
            this.setState({ divs: this.state.divs.concat(moreDivs) });
        }, 500);
    }

    refresh() {
        this.setState({ divs: [] });
        setTimeout(() => {
            this.setState({ divs });
        }, 3000);
    }

    render() {
        return (
            <div>

                {this.state.divs}

            </div>
        );
    }
}

Reactjs组件错误

0 个答案: