React.js DOM 元素未显示答案

【问题标题】：React.js DOM element not displayedReact.js DOM 元素未显示
【发布时间】：2021-07-12 13:40:47
【问题描述】：

我试图将 DOM 元素挂载到 div，但由于某种原因它不起作用，页面为空白。我正在使用 react、vs 代码和 antdesign 库。应用程序是使用 npm 创建的（创建反应应用程序）。带有工作示例的沙盒链接：https://codesandbox.io/s/scrolling-loaded-antd4151-forked-p6qmp?file=/index.html

这是我的代码：

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id='test-container'/>
    <script>var mountNode = document.getElementById('test-container');</script>
  </body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './index.css';

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

test.js

import React from 'react'
import InfiniteScroll from 'react';
import reqwest from 'reqwest';
import { List, message, Avatar, Spin } from 'antd';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';

const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';

class InfiniteListExample extends React.Component {
  state = {
    data: [],
    loading: false,
    hasMore: true,
  };

  componentDidMount() {
    this.fetchData(res => {
      this.setState({
        data: res.results,
      });
    });
  }

  fetchData = callback => {
    reqwest({
      url: fakeDataUrl,
      type: 'json',
      method: 'get',
      contentType: 'application/json',
      success: res => {
        callback(res);
      },
    });
  };

  handleInfiniteOnLoad = () => {
    let { data } = this.state;
    this.setState({
      loading: true,
    });
    if (data.length > 14) {
      message.warning('Infinite List loaded all');
      this.setState({
        hasMore: false,
        loading: false,
      });
      return;
    }
    this.fetchData(res => {
      data = data.concat(res.results);
      this.setState({
        data,
        loading: false,
      });
    });
  };

  render() {
    return (
      <div className="demo-infinite-container">
        <InfiniteScroll
          initialLoad={false}
          pageStart={0}
          loadMore={this.handleInfiniteOnLoad}
          hasMore={!this.state.loading && this.state.hasMore}
          useWindow={false}
        >
          <List
            dataSource={this.state.data}
            renderItem={item => (
              <List.Item key={item.id}>
                <List.Item.Meta
                  avatar={
                    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                  }
                  title={<a href="https://ant.design">{item.name.last}</a>}
                  description={item.email}
                />
                <div>Content</div>
              </List.Item>
            )}
          >
            {this.state.loading && this.state.hasMore && (
              <div className="demo-loading-container">
                <Spin />
              </div>
            )}
          </List>
        </InfiniteScroll>
      </div>
    );
  }
}

ReactDOM.render(<InfiniteListExample />, document.getElementById('test-container'));

app.js

import './App.css';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

我做错了什么？感谢您的帮助

【问题讨论】：

这是正常的，因为你的App渲染是空白的，试着在你的<div className="App">some text</div>里面放一些文字
但为什么没有加载无限列表示例？我安装在测试容器中的那个
因为你没有在你的主入口文件index.js中导入

标签： javascript html reactjs jsx ant-design-pro

【解决方案1】：

您应该导入 InfiniteListExample 而不是 App 组件（index.js 文件）

import React from 'react';
import ReactDOM from 'react-dom';
import InfiniteListExample from './test';
import reportWebVitals from './reportWebVitals';
import './index.css';

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

并从你的 test.js 文件中移除对 ReactDOM 的调用


import React from 'react'
import InfiniteScroll from "react-infinite-scroller";
import reqwest from 'reqwest';
import { List, message, Avatar, Spin } from 'antd';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';

const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';

class InfiniteListExample extends React.Component {
  state = {
    data: [],
    loading: false,
    hasMore: true,
  };

  componentDidMount() {
    this.fetchData(res => {
      this.setState({
        data: res.results,
      });
    });
  }

  fetchData = callback => {
    reqwest({
      url: fakeDataUrl,
      type: 'json',
      method: 'get',
      contentType: 'application/json',
      success: res => {
        callback(res);
      },
    });
  };

  handleInfiniteOnLoad = () => {
    let { data } = this.state;
    this.setState({
      loading: true,
    });
    if (data.length > 14) {
      message.warning('Infinite List loaded all');
      this.setState({
        hasMore: false,
        loading: false,
      });
      return;
    }
    this.fetchData(res => {
      data = data.concat(res.results);
      this.setState({
        data,
        loading: false,
      });
    });
  };

  render() {
    return (
      <div className="demo-infinite-container">
        <InfiniteScroll
          initialLoad={false}
          pageStart={0}
          loadMore={this.handleInfiniteOnLoad}
          hasMore={!this.state.loading && this.state.hasMore}
          useWindow={false}
        >
          <List
            dataSource={this.state.data}
            renderItem={item => (
              <List.Item key={item.id}>
                <List.Item.Meta
                  avatar={
                    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                  }
                  title={<a href="https://ant.design">{item.name.last}</a>}
                  description={item.email}
                />
                <div>Content</div>
              </List.Item>
            )}
          >
            {this.state.loading && this.state.hasMore && (
              <div className="demo-loading-container">
                <Spin />
              </div>
            )}
          </List>
        </InfiniteScroll>
      </div>
    );
  }
}

export default InfiniteListExample;

【讨论】：

我试过这个，我得到一个错误 Error: Element type is invalid: expected a string (for built-in components) or a class/function (for complex components) but got: object.跨度>
您是否在 test.js 文件中添加了export default InfiniteListExample;？
我更新了，请试试看，（import InfiniteScroll from 'react';不正确，应该是import InfiniteScroll from 'react-infinite-scroller' ）
谢谢，但我已经想通了，在你之前几分钟发布了答案

【解决方案2】：

我找到了问题..

我安装了 react-infinite-scroller，但是当我安装时，我不在项目根目录中，而是在 react 目录中。它确实成功安装了它，并且一切似乎都很好，因为导入指向正确。我删除了包，从根目录安装，更改了

import InfiniteScroll from 'react';

到

import InfiniteScroll from 'react-infinite-scroller';

它开始工作了。奇怪的是 vs 代码调试器没有抱怨...

【讨论】：