Fatal编程技术网
  • javascript/
  • Javascript 未显示React.js DOM元素

Javascript 未显示React.js DOM元素

javascript html reactjs

Javascript 未显示React.js DOM元素,javascript,html,reactjs,jsx,ant-design-pro,Javascript,Html,Reactjs,Jsx,Ant Design Pro,我正在尝试将DOM元素装载到div，但由于某些原因，它无法工作，页面为空。Im使用react、vs代码和antdesign库。应用程序是使用npm（创建反应应用程序）创建的。沙盒链接与工作示例： 这是我的代码： index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel=&

我正在尝试将DOM元素装载到div，但由于某些原因，它无法工作，页面为空。Im使用react、vs代码和antdesign库。应用程序是使用npm（创建反应应用程序）创建的。沙盒链接与工作示例：

这是我的代码：

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>


反应应用程序
您需要启用JavaScript才能运行此应用程序。
var mountNode=document.getElementById（'test-container'）；
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();

从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序；
从“/reportWebVitals”导入reportWebVitals；
导入“./index.css”；
ReactDOM.render（}
description={item.email}
/>
内容
)}
>
{this.state.loading&&this.state.hasMore&&(
)}
);
}
}
render（，document.getElementById（'test-container'）；
app.js

import './App.css';

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

export default App;

import'/App.css'；
函数App（）{
返回(
);
}
导出默认应用程序；
我做错了什么？感谢您的帮助

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

从“React”导入React；
从“react dom”导入react dom；
从“./test”导入InfiniteListExample；
从“/reportWebVitals”导入reportWebVitals；
导入“./index.css”；
ReactDOM.render（，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;



从“React”导入React
从“反应无限滚动条”导入无限滚动条；
从“reqwest”导入reqwest；
从“antd”导入{List，message，Avatar，Spin}；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
常量fakeDataUrl=https://randomuser.me/api/?results=5&inc=name、性别、电子邮件、nat&noinfo’；
类InfiniteListExample扩展了React.Component{
状态={
数据：[]，
加载：false，
哈斯莫尔：没错，
};
componentDidMount（）{
这个.fetchData（res=>{
这是我的国家({
数据：res.results，
});
});
}
fetchData=callback=>{
雷克韦斯特({
url:fakeDataUrl，
键入：“json”，
方法：“get”，
contentType:'应用程序/json'，
成功：res=>{
回收（res）；
},
});
};
handleInfiniteOnLoad=（）=>{
设{data}=this.state；
这是我的国家({
加载：对，
});
如果（数据长度>14）{
message.warning（'Infinite List loaded all'）；
这是我的国家({
哈斯莫尔：错，
加载：false，
});
返回；
}
这个.fetchData（res=>{
data=data.concat（res.results）；
这是我的国家({
数据，
加载：false，
});
});
};
render（）{
返回(
(
内容
)}
>
{this.state.loading&&this.state.hasMore&&(
)}
);
}
}
导出默认无穷大示例；
我发现了问题

我安装了react infinite scroller，但安装时，我不在项目根目录中，而是在react目录中。它确实成功地安装了它，而且由于导入指向正确，所以一切看起来都很好。我删除了软件包，从根目录安装，更改了

import InfiniteScroll from 'react';
到

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

这很正常，因为你的应用程序呈现为空白，尝试在你的
一些文本中放入一些文本，但是为什么没有加载无限列表示例？我装载在测试容器中的那一个，因为您没有将其导入主条目文件index.jsI尝试了这一操作，我得到了一个错误：元素类型无效：应该是字符串（对于内置组件）或类/函数（对于复合组件），但得到了：object.you添加了
export default InfiniteListExample
在你的test.js文件中？是的，我检查了，现在我做了一个更新，请尝试，（从'react'导入InfiniteScroll；
不正确，应该是从'react InfiniteScroll'导入InfiniteScroll'）谢谢，但我已经弄明白了，在你之前几分钟就在下面发布了anwser 

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;


import InfiniteScroll from 'react';

import InfiniteScroll from 'react-infinite-scroller';