index.js

Question

我在编写以下反应应用时遇到问题

index.js

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


    var Todo = React.createClass({
    render:function(){
        (

            <h1>hai man iam mark!!</h1>
        )
    }
    });

    ReactDOM.render(<Todo/>,document.getElementById(Todo));

的index.html

 <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>chandru kingdom</title>
    </head>
    <body>
        <div id="Todo">
    <script src="/app/bundle.js"></script>
        </div>  
    </body>
    </html>

从上面的代码我只有错误。我不知道这些都是组件基础问题或依赖问题。从我使用的这些编码中

bundle.js 对于组件。

我的浏览器控制台告诉我

>##Uncaught Error: _registerComponent(...): Target container is not a DOM element.##
    >at invariant (bundle.js:946)
    >at Object._renderNewRootComponent (bundle.js:11432)
    >at Object._renderSubtreeIntoContainer (bundle.js:11522)
    >at Object.render (bundle.js:11543)
    >at Object.<anonymous> (bundle.js:13455)
    >at __webpack_require__ (bundle.js:660)
    >at fn (bundle.js:84)
    >at Object.<anonymous> (bundle.js:31378)
    >at __webpack_require__ (bundle.js:660)
    >at module.exports (bundle.js:709)

我怎么解决这个问题请帮助我。

提前致谢!!!!

Answer 1

问题是您没有将DOM元素作为第二个参数传递给ReactDOM.render。 document.getElementById在DOM中搜索给定的ID，因此它需要是一个字符串，但是您将其传递给React组件，因此它将返回null，这显然不是有效的DOM元素。

您想要的是在Todo附近加上引号：

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

修复该问题后，您将收到Todo.render()未返回有效React元素的错误。这是因为你没有返回语句因此它返回undefined。您可能只是忘记了return，所以只需添加return语句：

render: function(){
    return (
        <h1>hai man iam mark!!</h1>
    )
}

Answer 2

ReactDOM.render(<Todo/>,document.getElementById("Todo"));

不

ReactDOM.render(<Todo/>,document.getElementById(Todo));

你需要通过传递一个字符串来选择你做的dom元素 getElementById

是基于Component或bundling或module或webpack_require的错误

index.js

的index.html

2 个答案: