专栏首页一个会写诗的程序员的博客Uncaught Error: _registerComponent(...): Target container is not a DOM element

Uncaught Error: _registerComponent(...): Target container is not a DOM element

Uncaught Error: _registerComponent(...): Target container is not a DOM element

<script type="text/babel">
    var SessionPage = React.createClass({

        getInitialState: function () {
            var context = {
                context: {}
            };
            return context;
        },

        componentDidMount: function () {
            this.serverRequest = $.ajax({
                url: this.props.url,
                data: {},
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    this.setState({
                        context: data
                    })
                }.bind(this), // 修改bind()前的函数内部this变量指向。if 不bind的话,方法内部的this 就是 $.ajax({这个对象}), bind传入的this应该是组件。 可以console 输出一下看看。
                error: function (msg) {
                    console.log("error:" + msg);
                }.bind(this)
            })
        },

        componentWillUnmount: function () {
            this.serverRequest.abort()
        },


        render: function () {
            var creatItem = function (it) {
                return (<code>JSON.stringify(it)</code>)
            };

            return (
                    <div>{creatItem(this.state.context)}</div>
            );
        }
    });

    ReactDOM.render(<SessionPage url="/api/session"/>);
</script>

就是一个找不到DOM节点的问题。

改成:

ReactDOM.render(<SessionPage url="/api/session"/>, document.getElementById("App"));

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一段探索React自建内部构造的旅程

    在先前的文章里我们涵盖了React基本原理和如何构建更加复杂的交互组件。此篇文章我们将会继续探索React组件的特性,特别是生命周期。

    一个会写诗的程序员
  • 回调函数的后面加个bind(this)的作用是什么回调函数的后面加个bind(this)的作用是什么

    一个会写诗的程序员
  • JQuery中bind和unbind函数

    测试: 页面代码: <body> <input type="button" name="aaa" value="点击我"> <input type="c...

    一个会写诗的程序员
  • 前端自动化测试解决方案探析

      前端测试一直是前端项目开发过程中机器重要的一个环节,高效的测试方法可以减少我们进行代码自测的时间,提高我们的开发效率,如果你的代码涉及的测试用例较多,而且项...

    IMWeb前端团队
  • 你被追尾了

    被追尾了,严格来讲,就是你的汽车和别人的汽车发生了碰撞. 所以本文来介绍一些检测碰撞的算法.

    ACM算法日常
  • 设计模式 | 建造者模式

    这个设计模式主要是解决复杂对象的创建问题, 使这个抽象过程的不同实现方法可以构造出不同表现(属性)的对象。

    憧憬博客
  • Laravel之Pipeline1. 背景2. 基本操作3. 动手实现4. Laravel中Pipeline实现5. 总结

    在Laravel中经常需要对一个对象,经过多个中间层处理后,才到真正处理的函数,Laravel将这种常用操作抽象出来,叫做Pipeline

    zhuanxu
  • 360护心镜脚本分析及N种绕过方式

    官方介绍: 通过Hook XSS的常用函数,并监控DOM元素的创建,从而对整个页面的js行为进行监控。当发现页面中存在XSS攻击行为时,可根据预置的选项,进行放...

    逸鹏
  • 前端自动化测试解决方案探析

    前端测试一直是前端项目开发过程中机器重要的一个环节,高效的测试方法可以减少我们进行代码自测的时间,提高我们的开发效率,如果你的代码涉及的测试用例较多,而且项目需...

    IMWeb前端团队
  • javascript两种声明函数的方式的一次深入解析

    javascript有两种声明函数的方式,一个是函数表达式定义函数,也就是我们说的匿名函数方式,一个是函数语句定义函数,下面看代码:

    他叫自己MR.张

扫码关注云+社区

领取腾讯云代金券