Question

当我测试运行时会出现此错误

我的文件夹结构很简单：

app folder
  index.html
  index.js
  home.js
webpack.config.js
dist folder
  bundle.js

index.html看起来像这样

<!DOCTYPE html>
<html>
<head>
    <title>hello world app</title>
    <link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src= "../dist/bundle.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>

index.js是这样的：

var React = require('react');
var ReactDOM = require('react-dom');
var Home = require('./Home');

ReactDOM.render( Home, document.getElementById('app'));

和home.js是这样的：

var React = require('react');
var Home = React.createClass({
    render: function(){
        return(
            <div> hello from home </div>
        )
    }
});
module.exports = Home;

我通过这个webpack配置运行编译代码：

module.exports = {
    entry:[
    "./app/index.js"
    ],
    output: {
        path: __dirname + '/dist',
        filename: "bundle.js"
    },
    module: {
        loaders : [
            {test: /\.js$/, exclude : /node_modules/, loader: "babel-loader", 
                query: {
                    presets: ['react']
                }
            }
        ]
    }
}

编译完成后，我运行index.html文件。并且错误ReactDOM.render（）：无效的组件元素......出现了。我做错了什么？

Answer 1

ReactDOM.render将React类的实例作为其第一个参数。你直接传授一个班级。

所以而不是

ReactDOM.render(React.createElement(Home), document.getElementById('app'));

尝试如下。

ReactDOM.render(<Home />, document.getElementById('app'));

或JSX对手

<script src= "../dist/bundle.js"></script>

此外，如下所示，这可能是一个好主意。

<head>

位于页面底部，而不是<div id="app"></div>，以便脚本可以找到import socket import pyaudio import wave import sys import pickle import time HOST="" PORT=1061 s=socket.socket(socket.AF_INET, socket.SOCK_STREAM) CHUNK = 1024 FORMAT = pyaudio.paInt16 CHANNELS = 2 RATE = 44100 RECORD_SECONDS = 3 def record(sock): def callback_record(in_data, frame_count, time_info, status): #print len(in_data) sock.sendall(in_data) return (in_data, pyaudio.paContinue) p = pyaudio.PyAudio() stream = p.open(format=FORMAT, channels=CHANNELS, rate=RATE, input=True, output=False, stream_callback=callback_record) stream.start_stream() return stream def play(sock): def callback_play(in_data, frame_count, time_info, status): #msg=recv_all(sock) in_data=sock.recv(5000) return (in_data, pyaudio.paContinue) p = pyaudio.PyAudio() stream = p.open(format=FORMAT, channels=CHANNELS, rate=RATE, input=False, output=True, stream_callback=callback_play) stream.start_stream() return stream def recv_all(sock): data=sock.recv(5000) return data if sys.argv[1] == 'server': s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1) s.bind((HOST, PORT)) s.listen(10) while(True): print "Listening at:", s.getsockname() sc, addr=s.accept() print "Connection established with:", addr while True: stream_record=record(sc) #stream_play=play(sc) while stream_record.is_active():# or stream_play.is_active(): #time.sleep(0.0) pass #stream_record.stop_stream() #stream_record.close() #stream_play.stop_stream() #stream_play.close() elif sys.argv[1]=='client': s.connect((HOST, PORT)) while True: stream_play=play(s) while stream_play.is_active():#stream_record.is_active() or #time.sleep(0.0) pass #stream_record.stop_stream() #stream_record.close() #stream_play.stop_stream() #stream_play.close()。

Answer 2

您必须使用像

这样的渲染功能

ReactDOM.render(<Home />, document.getElementById('app'));

ReactDOM.render（）：无效的组件元素。不要传递组件类，而是确保通过将其传递给React.createElement来实例化它

2 个答案: