Question

我是新手做出反应，我需要创建一个动态加载div的无限滚动页面。我在网上找到了一个库，我在这里使用它，但我需要div在不同的组件中。我一直在尝试这样做但是我遇到了一些错误。有人可以帮帮我吗？

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
};

const divs = [
    <div key={1} style={{ height: 200, background: '#9bc95b', ...style }}>Div no 1</div>,
    <div key={2} style={{ height: 200, background: '#ffd47b', ...style }}>Div no 2</div>,
    <div key={3} style={{ height: 200, background: '#95a9d6', ...style }}>Div no 3</div>,
    <div key={4} style={{ height: 200, background: '#ffa8e1', ...style }}>Div no 4</div>,
    <div key={5} style={{ height: 200, background: '#9bc95b', ...style }}>Div no 5</div>,
    <div key={6} style={{ height: 200, background: '#ffd47b', ...style }}>Div no 6</div>,
    <div key={7} style={{ height: 200, background: '#95a9d6', ...style }}>Div no 7</div>,
    <div key={8} style={{ height: 200, background: '#ffa8e1', ...style }}>Div no 8</div>,
];

const colors = ['#9bc95b', '#ffd47b', '#95a9d6', '#ffa8e1'];

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;
        for (let i = 0; i < 30; i++) {
            moreDivs.push(
                <div key={'div' + count++} style={{ height: 200, background: colors[i % 4], ...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 (
            { this.state.divs }
        );
    }


}

Answer 1

我立即注意到的是你如何渲染div。您的return语句需要返回一个int x = (int)Convert::ChangeType(obj, int::typeid);标记，并且您当前正在尝试呈现div数组。

您没有提到您收到的错误，但我认为这是问题，那么您可以尝试以下方法：

generic <typename T>
public ref class Foo
{
public:
    void Bar(Object^ obj)
    {
        T x = (T)Convert::ChangeType(obj, T::typeid);
    }
};

此外，更有效/更清洁的方式可能类似于以下内容（因为您只更改每个div的背景颜色和键）：

div

Reactjs：创建组件时出错

1 个答案: