导入React组件时出错

Question

尝试在React中导入组件时遇到以下错误。

Uncaught TypeError: Cannot read property 'replaceChild' of null
at Function.replaceChildWithTree (index_bundle.js:4067)
at Object.dangerouslyReplaceNodeWithMarkup (index_bundle.js:21337)
at Object.dangerouslyReplaceNodeWithMarkup [as replaceNodeWithMarkup] (index_bundle.js:7162)
at ReactCompositeComponentWrapper._replaceNodeWithMarkup (index_bundle.js:22799)
at ReactCompositeComponentWrapper._updateRenderedComponent (index_bundle.js:22789)
at ReactCompositeComponentWrapper._performComponentUpdate (index_bundle.js:22739)
at ReactCompositeComponentWrapper.updateComponent (index_bundle.js:22660)
at ReactCompositeComponentWrapper.performUpdateIfNecessary (index_bundle.js:22576)
at Object.performUpdateIfNecessary (index_bundle.js:4277)
at runBatchedUpdates (index_bundle.js:1846)

我的组件是：

import React from 'react'


export default class NoticeCard extends React.Component {


    render() {
            return (
                    <section className="centered white">
                            <div className="container section">
                                    <div className="center">
                                              <p>Invalid Username/Password </p>
                                    </div>
                            </div>
                    </section>
            )
    }

}

呈现组件，但控制台抛出错误。

Answer 1

该错误仅是一种症状，吞下了代码中某处的崩溃。

这可能表明DOM已在React的控制范围之外进行了修改（parent为null，因此在替换子代时，它将尝试在null上调用replaceChild）。 确保父组件未更改为null或未定义。

检查此线程： https : //github.com/facebook/react/issues/6998

特别是此评论： https : //github.com/facebook/react/issues/6998#issuecomment-263336611